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

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

对一个文字进行美化

左右型美化

HTML代码

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%就可以了&＃xff0c;思路是一样的。

使用CSS3伪类元素&＃xff08;::before|::after&＃xff09;对文字进行美化

对多个文字进行美化

左右型美化

这个其实跟单个字的左右型是一样的&＃xff0c;你只需要在HTML代码里添加多行标签包含的字就可以了。代码如下

上下型

上下型有两种方法&＃xff0c;一种跟例子3的代码差不多&＃xff0c;只需要把width:50%修改成height:50%就可以了。还有一种方法&＃xff0c;除了要把 width:50%修改成height:50%&＃xff0c;还需要在一个标签里添加多个文字&＃xff0c;这种方法其实是最简单的。HTML代码如下

使用CSS3伪类元素&＃xff08;::before|::after&＃xff09;对文字进行美化

动态文字美化

我们先从一个最简单的例子开始

HTML代码

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;height: 50%;display: inline-block;overflow: hidden;transition:1s ease-in-out 0s;
}
span:hover::before{height: 0;
}

在这里需要注意的是伪类的使用&＃xff0c;当这两个伪类放在一起时:hover要放在:before之前&＃xff0c;不然就没有效果了。上面这个例子是上下型的&＃xff0c;左右型 的就可 以在这个例子稍微修改下代码就OK了&＃xff0c;把span::before{}伪类元素里的height改成width和给这个伪类添加一个:hover{}样式 就行了&＃xff0c;如果是左右型的&＃xff0c;那么这里的:hover样式就得对应写成:hover{width:0}

还有一种就是左右上下一起来的我们只需要给上面这个例子中的span::before伪类选择器追加一个width:50%;span:hover::before伪类选择器也添加一个width:0;就可以了&＃xff0c;这里的50%和0可以根据个人需要进行更改。

从上面的例子中我们可以看出用一个元素把每个文字 包含起来会更方便&＃xff0c;不管是左右型还是上下型都适用。对于上下型的话&＃xff0c;就看你想用哪一种效果了。

要每个字单独出来的HTML代码如下

所有文字在一个标签里HTML代码如下

但他们有一个共同点&＃xff0c;那就是CSS样式不需要改动。

DEMO&＃xff1a;http://sources.ikeepstudying.com/font-prettify/

原文&＃xff1a;http://yunkus.com/article/css3/285.html

转自&＃xff1a;使用CSS3伪类元素&＃xff08;::before|::after&＃xff09;对文字进行美化