css3 - CSS to add commas between <dd>s -

best attempt 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 add commas between <dd> elements using css pseudo-elements. problem above attempt there's space before each comma.

when <li>s, can use ::after pseudo-elements , target li:last-of-type remove comma last item, can't figure out way target last <dd> in example. think proposed has selector (like dd:has(+ dd)). there workaround in css3?

or there way rid of space? if have to, i'll use negative margin pull comma toward preceding word.

the space seeing between elements determined parent element's font-size. inline elements respect whitespace in markup.

one way remove set parent element's font-size 0, , reset children element's font-size. see this answer alternative approaches.

dl {    font-size: 0;  }  dd, dt {    font-size: 16px;  }  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>