Special format list

Simple rules don't play nice with code maintenance.

HTML

<h2>
Example
</h2>
<dl class="example">
	<dt>def 1</dt>
  <dd>
  <ul>
  <li>name 1</li>
  <li>name 2</li>
  <li>name 3</li>
  </ul>
  </dd>
	<dt>def 2</dt>
  <dd>
  <ul>
  <li>name 1</li>
  <li>name 2</li>
  <li>name 3</li>
  </ul>
  </dd>  
</dl>

CSS

/*
Step 1: Use CSS to select non-last td elements and insert a komma (,) behind the word "def". Only touch HTML if you want to add classes.
Step 2: Randomly add to/remove from/shuffle <tt> and <td> elements inside the dl list. You are free to add/remove/modify classes. 
Observe: 1) your komma injection break. Or 2) you need to adjust your classes after every edit. 
*/ 
dl.example {
    margin: 0;
    width:40%;    
    border: solid 1px green;
}

dl.example ul {
  list-style-type:none;
  margin:0;
}
dl.example li:not(:last-child):after {
  content: ', ';
}