利用css设置半个文字的样式代码实例_html/css

soft 

上面的代码实现了我们的要求，字符串中的文字只有一半被设置为红色，下面简单介绍一下它的实现原理。
一.实现原理:
效果看起来很炫，其实原理非常的简单，就是利用:before伪元素选择器和content属性结合使用，为span元素内添加一个伪元素，同时为元素的内容设置为span元素的data-content属性值，并且设置它为绝对定位使其覆盖在原来的span元素之上，宽度为原来span元素的一半，然后再设置这个为元素中字体的颜色，这样就实现了我们的要求，看起来是一个文字，其实是两个文字叠加覆盖的效果。
二.相关阅读:
1.:before可以参阅CSS的伪对象选择符before/E::before一章节。
2.content属性可以参阅CSS的content属性一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14781

更多内容可以参阅:http://www.softwhy.com/divcss/