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