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

最新推荐文章于 2024-07-28 18:09:15 发布

iteye_5904

最新推荐文章于 2024-07-28 18:09:15 发布

阅读量2.9k

点赞数 1

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

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

版权

Div / Css / XML / HTML5 专栏收录该内容

177 篇文章 1 订阅

订阅专栏

本文介绍了如何使用CSS3的::before和::after伪类元素对文字进行美化，包括左右型、上下型以及动态文字的美化方法。通过示例代码展示了如何通过HTML和CSS实现将文字分成两半显示不同颜色，以及对多个文字和动态效果的美化。

摘要由CSDN通过智能技术生成

如果要想把一个文字的分成两半分别设置成不同的颜色，你是不是第一时间只想到通过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;
    font-size: 12rem;
    color: #333;
    content: attr(data-text);
    white-space:nowrap;
    width: 50%;
    display: inline-block;
    overflow: hidden
}

上下型美化

只需要把CSS代码里的width:50%修改成height:50%就可以了，思路是一样的。

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

对多个文字进行美化

左右型美化

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

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

上下型

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3伪类元素，文字进行美化</title>
</head>
<body>
<div>
    <span data-text='云库网'>云库网</span>
</div>
</body>
</html>

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

动态文字美化

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

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3伪类元素,动态文字进行美化</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;
    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;
}

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

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

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

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

<div>
    <span data-text='云'>云</span>
    <span data-text='库'>库</span>
    <span data-text='网'>网</span>
</div>

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

<div>
    <span data-text='云库网'>云库网</span>
</div>

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

DEMO：http://sources.ikeepstudying.com/font-prettify/

原文：http://yunkus.com/article/css3/285.html

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

iteye_5904

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录