<style>

    *{

      margin:;

      padding:;

    }

    .clearfix {

      *zoom:;

    }

    .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>