css伪类before和after使用

给元素加一个下边框 

li{
font-size: 15px;
        padding: 12px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
}
.aLink:before {
          content: "";
          display: block;
          width: 1px;
          height: 18px;
          background-color: #c6c6c6;
          position: absolute;
          left: 0;
          top: 7px;
        }
li:after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 15px;
        height: 1px;
        content: "";
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        background-color: #c8c7cc;
      }