css中的::after和::before

先来看一个::before和::after的例子，给一个元素的前后再不添加新的元素的时候增加内容：

    <view class="info-before">测试before和after</view>
  .info-before {
    font-weight: bold;
    margin: 30px;
  }

  .info-before::before {
    content: "添加在::before";
    color: red;
  }

  .info-before::after{
    content: "添加在::after";
    color: blue;
  }

可以看到，通过::before和::after我们在不添加元素的情况下给info-before元素增加了前后内容。这就是一般用法，通过虚拟元素的形式添加内容，这里有一点要注意content这个属性是必须要添加的，就算没有内容，也要将content写为""空字符串。
接下来我们看一个利用::before添加下划线的例子：

    <view class="underline-before">利用before给文字添加下划线</view>

  .underline-before {
    font-weight: bold;
    margin: 30px;
    position: relative;
    display: inline-block;
  }
  .underline-before::before {
    content: "";
    height: 10px;
    background-color: #4cd964;
    width: 100%;
    position: absolute;
    top: 100%;
  }

这里可以看到我们没有给before显示文本的内容但是仍然赋值了content: ""，原因就是上面说的必须要赋值，如果不给content赋值就看不到before要显示的内容。通过给::before设置内容可以看到我们给文本添加了一个绿色的下划线，通过给before设置position: absolute我们可以给下划线设置任意位置，你可以试一试。这跟border比起来能更加自由灵活的设置下划线的位置和样式，长短等等。