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

最新推荐文章于 2024-05-10 00:53:46 发布

iteye_5904

最新推荐文章于 2024-05-10 00:53:46 发布

阅读量2.9k

点赞数 1

分类专栏： Div / Css / XML / HTML5

本文链接：https://blog.csdn.net/iteye_5904/article/details/82642019

版权

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

对一个文字进行美化

左右型美化

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3伪类元素（::before|::after）,文字进行美化</title>
</head>
<body>
<div>
    <span data-text='库'>库</span>
</div>
</body>
</html>

CSS代码

*{
    padding: 0;
    margin: 0
}
span{
    position: relative;
    font-size: 12rem;
    color: #0099CC
}
span::before{
    position: absolute;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_5904

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3伪类元素（::before|::after）对文字进行美化

如果要想把一个文字的分成两半分别设置成不同的颜色，你是不是第一时间只想到通过PS来实现呢，不过有一个不好的地方就是图片会占用更多的资源。所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法。对一个文字进行美化左右型美化 HTML代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&g...
复制链接

扫一扫