[RbnJrg]

Originally Posted by odedta

Hello,

I want to style a list just like the one in Microsoft Word. (View attached)

I used the following CSS code to style it:

.List-Style2
{
	list-style-type:none;
}

.List-Paragraph2:before {
	content: "\0x0076";
}

This doesn't work, I tried all sorts of codes but nothing seems to work, I prefer to avoid image if there is a working code for this because of scalability.

Do I have to embed a font to get this symbol?

Try this, maybe it works:

1. In your .css stylesheet:

.List-Style2 {
    display: list-item;
    margin-left: 2em;
    list-style-type: none;
}

.List-Style2:before {
    margin-left: -1.1em;
    content: "❖ ";
}

2. In your .xhtml file:

<p class="List-Style2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>

Of course, since we are using the :before pseudo-element, we are going to have some "issues" under ADE.

Regards
Rubén