W3Context Online Editor v1.1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS list-style Example</title>
  <style>
    dt {
      padding: .25em;
      clear: left;
    }
    dd {
      float: left;
      width: 60%;
      margin-left: 80px;
      padding: .25em 0;
    }
    dt:before {
      content: '\21E8';
      color: #900025;
      margin-right: 5px;
      font-size: 20px;
    }
    dd:before {
      content: url('resources/images/star3.png');
      margin-right: 10px;
    }
    dd.water:after {
      content: '\2665';
      color: red;
      margin-left: 5px;
    }
    dd.tea:after {
      content: '\1F600';
      color: red;
      margin-left: 5px;
    }
    dd.coffee:after {
      content: '\1F60D';
      color: red;
      margin-left: 5px;
    }
  </style>
</head>
<body>
  <h1>CSS list-style Example</h1>
  <dl id="p1">
    <dt>Group One</dt>
    <dd class="water">Water</dd>
    <dd class="tea">Tea</dd>
    <dd class="coffee">Coffee</dd>
  </dl>
  <dl id="p2">
    <dt>Group Two</dt>
    <dd class="water">Water</dd>
    <dd class="tea">Tea</dd>
    <dd class="coffee">Coffee</dd>
  </dl>
  <dl id="p3">
    <dt>Group Three</dt>
    <dd class="water">Water</dd>
    <dd class="tea">Tea</dd>
    <dd class="coffee">Coffee</dd>
  </dl>
</body>
</html>