伪类巧用（1）

来源：互联网发布：java集合类原理编辑：程序博客网时间：2024/06/16 09:51

关于: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美化半个字符巧妙方法

阅读全文

0 0