本文主要介绍了利用CSS伪元素实现文本局部变色的方法。之后，本文还介绍了w3school的基本知识，CSS伪元素。





思维

想法很简单，就是一个字一个字写两次，只显示部分，但可以不写一个字的两倍。在这里，你需要使用CSS伪元素：之前和之后，记住这伪元素伪的话，说明它并不存在。我们的方法是将同一人物在伪元素，显示只有一半的性格，和原来的字符显示的另一半，最后拼单词。
货物积载与系固安全操作规则



CSS代码将内容复制到剪贴板。


{。HF
显示：内联块；
字体大小：80px；
行高：80px；
颜色：# 000；
职位：相对；
溢出：隐藏；
朵朵空间：预； / * * /处理空间
}
{以前
位置：绝对；
左：0；
顶部：0；
颜色：# F00；
显示块；
宽度：30%；如果要更改半文本，请设置50% * /
内容：属性（数据量）； / *动态伪元素获取内容。
溢出：隐藏；
}




HTML代码



xml代码将内容复制到剪贴板。


W
E
B
前
结束




演示

附录：w3school的解释：之前和之后的伪元素：

CSS2之前伪元素：

在元素的内容之前插入新内容。

下面的示例在每个元素前面插入一个图片：

CSS代码将内容复制到剪贴板。


H1：前
{
内容（URL）；
}




亲自试一试
CSS2后伪元素：

：伪元素可以在元素的内容后面插入新内容。

下面的示例在每个元素后面插入一个图片：

CSS代码将内容复制到剪贴板。


H1：后
{
内容（URL）；
}




亲自试一试