View video tutorial

CSS Definition Lists

CSS

List items are labeled with a description.

CSS description list

In a definition list, each list item is labeled with a description.

Example

    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;
    }
Try it Now »

Click on the "Try it Now" button to see how it works.