Best attempt so far
dd { display: inline; margin: 0; }
dd + dd::before {
content: ', ';
}
<dl>
<dt>One</dt>
<dd>one</dd>
<dd>two</dd>
<dd>three</dd>
<dt>Two</dt>
<dd>one</dd>
<dd>two</dd>
<dd>three</dd>
</dl>
I'd like to add commas between the <dd>
elements using CSS pseudo-elements. The only problem with the above attempt is that there's a space before each comma.
When I do this with <li>
s, I can use ::after
pseudo-elements and target li:last-of-type
to remove the comma from the last item, but I can't figure out a way to target the last <dd>
in my example. I think the proposed has
selector could help (like dd:has(+ dd)
). Is there any workaround in CSS3?
Or is there a good way to get rid of the space? If I have to, I'll use a negative margin to pull the comma back toward the preceding word.