css :before 內容左邊 分割線（四）

商品 左邊分割線，使用css僞類實現，before or  after

<style>
    *{
      margin: 0;
      padding: 0;
    }

    .clearfix {
      *zoom: 1;
    }

    .clearfix:before,
    .clearfix:after {
      content: '';
      display: block;
    }

    .clearfix:after {
      clear: both;
    }

    dl{
      border: 1px solid red;
    }
    dt{
      float: left;
      padding: 0 20px;
    } dt:before{
      content: '';
      width: 1px;
      height: 10px;
      display: inline-block;
      background-color: #FFA500;
      margin-right: 5px;
    }
    dt:after{
      content: '';
      width: 1px;
      height: 10px;
      display: inline-block;
      background-color: #FFA500;
    }
    dd{
      background-color: yellow;
      margin-left: 80px;
    }
    dd:before{
      content: '';
      width: 1px;
      height: 10px;
      display: inline-block;
      background-color: #FFA500;
      margin-right: 5px;
    }
  </style>

 

 

<dl class="clearfix">
  <dt>計算機</dt>
  <dd>托爾斯泰1</dd>
</dl>