Question

I have a <dl> description list that is unordered and therefore should display bullets before each <dt>.

Edit: To clarify, I have an unordered list of <dt>–<dd> pairs. They should display looking like one list item, with the <dt> having a bullet before it.

I can think of two ways to apply bullets to this list:

1. Putting a <ul> around the <dt> and then <li>s around the items
2. Using the <dt>'s CSS :before pseudo-selector and give it the content of a bullet

Which is the better way to create a description list with bullets?

Thanks for any responses.

Answer 1

Why don’t you simply use an un-ordered list? Is there a particular reason why you are not?

But to answer your question, you could use:

<dt>
   <dd style='display:list-item;'> Content </dd>
   <dd style='display:list-item;'> Content </dd>
</dt>

I am not sure about cross browser compatibility.