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>