html中after后面添加文字,使用CSS3伪类元素（::before|::after）对文字进行美化

如果要想把一个文字的分成两半分别设置成不同的颜色，你是不是第一时间只想到通过PS来实现呢，不过有一个不好的地方就是图片会占用更多的资源。所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法。

对一个文字进行美化

左右型美化

HTML代码

CSS3伪类元素(::before|::after),文字进行美化

库

CSS代码

*{

padding: 0;

margin: 0

}

span{

position: relative;

font-size: 12rem;

color: #0099CC

}

span::before{

position: absolute;

font-size: 12rem;

color: #333;

content: attr(data-text);

white-space:nowrap;

width: 50%;

display: inline-block;

overflow: hidden

}

上下型美化

只需要把CSS代码里的width:50%修改成height:50%就可以了，思路是一样的。

使用CSS3伪类元素(::before|::after)对文字进行美化

对多个文字进行美化<