伪类巧用（1）

关于:before与:after的使用

接触前端学习也近一年了，对伪类的使用却并不怎么多。

来讲讲我的新发现吧！
成果图：

就是用颜色美化字符，主要是通过:before与:after两个伪类实现。

大致原理就是将伪类中放相应的字符，设置不同颜色，并由于伪类的层次比原元素层次高就会覆盖在原元素上。头覆盖是利用:before实现的，尾覆盖是有:after实现的。值得一提的是再尾覆盖时先要将文本顺序改一下，这样:after所展示的字符就是从右往左显示的了。还有一点就是记得要overflow:hidden，使得字符显示宽度与设置宽度相符。

html代码：

<span class="half" data-content="筱">筱</span>

css代码：

.half{
            position:relative;
            font-size:80px; 
            color: #F7DDF5; 
        }
        .half:before {
            position:absolute;
            top:0;
            left:0;
            width: 40%;
            content: attr(data-content);
            overflow:hidden;
            color: #32F772;
        }
        .half:after {
            direction: rtl;
            position:absolute;
            top:0;
            left: 65%;
            width: 35%;
            content: attr(data-content);
            overflow:hidden;
            color: #F6D496;
        }

理解还略粗浅，希望大家一起来交流^^

参考资料：
用CSS3美化半个字符巧妙方法