先来看一个::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比起来能更加自由灵活的设置下划线的位置和样式，长短等等。