CODEWITHSUNDEEP
htmlcss
3fn
3fn

Reputation: 21

Displaying a <dd> data before <dt>?

So I'm trying to display data in a DL where the dynamic DD data is listed before the DT.

Example: "3 Votes, 6 Comments" vs. "Votes 3, Comments 6".

<dl>
    <dt>Votes</dt>
    <dd>3</dd>
    <dt>Comments</dt>
    <dd>6</dd>
</dl>

A DL makes the most semantic sense; but without a parent-child relationship, I can't use floating.

Is there a way to make this work? Or is there a better semantic solution?

Upvotes: 2

Views: 128

Answers (1)

Ilya B.
Ilya B.

Reputation: 950

As for myself, I would use simple list, something like this:

HTML

<ul>
  <li data-n="1">Vote</li>
  <li data-n="6">Comment</li>
</ul>

CSS

ul { list-style: none; }
ul,li { margin: 0; display: inline-block; }
li:before { content: attr(data-n) " "; }
li:not([data-n="1"]):after { content: "s"; }

Demo

And I think DL does not make semantic sence in this case, because it is not the definition of "Votes" and "Comments" terms

Upvotes: 2

Related Questions