CSS：利用before、after伪类给元素添加前后标记

实现效果

像这种文字前面添加简单的标记，可以直接用css伪类实现。

<span class="more-detail">查看详情>></span>

.more-detail {
    color: #2BEEFF;
    position: relative;

    &::before {
      content: '';
      display: block;
      // 定位
      position: absolute;
      top: 12px;
      left: -14px;
      // 圆点
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background: red;
    }
  }

同理也可以将标记替换为任意图标、星号等等

.more-detail {
    color: #2BEEFF;
    position: relative;

    &::before {
      content: '*';
      display: block;
      // 定位
      position: absolute;
      top: 10px;
      left: -14px;
      // *颜色大小
      color: red;
      font-size: 20px;
    }
  }