使用CSS3伪类元素(::before|::after)对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过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%就可以了,思路是一样的。
![](http://i1.wp.com/justcode.ikeepstudying.com/wp-content/uploads/2015/10/1-15092Q5240N46.jpg?resize=580%2C350)
使用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>
![](http://i2.wp.com/justcode.ikeepstudying.com/wp-content/uploads/2015/10/1-15092Q53642M1.jpg?resize=580%2C350)
使用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)对文字进行美化
使用CSS3伪类元素(::before|::after)对文字进行美化相关推荐
- html中after后面添加文字,使用CSS3伪类元素(::before|::after)对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源.所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法. ...
- css3伪类图解,CSS3伪类元素详解/深入浅出
很多朋友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和C ...
- CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
- CSS3 伪类和伪元素
CSS3 伪类和伪元素 伪类 静态伪类 动态伪类 伪元素 伪类 元素在不同状态表现不同样式,如点击a标签文本变红,放开变紫 静态伪类 只能用于超链接,用得少 :link 超链接未点击前的样式 :vis ...
- css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略
0804 css3伪类 target 突出显示活动的 HTML 锚 div:target{background: #0e3757;} 表单控件伪类 <style>input:enabled ...
- css3伪类和伪元素基本使用
一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:target,:not(),:focus. 常见伪元素--::first-let ...
- CSS 伪类选择器:如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
- css伪类选择器记忆技巧,CSS3 伪类选择器 :nth-child()
:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择: :nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0 ...
- html伪类元素加图片,HTML中常见伪类和伪元素的区别
原标题:HTML中常见伪类和伪元素的区别 提到伪类,在我的印象中最常用的不过是:hover.:active.:link.:visited,还有css3里的常用伪类选择器:last-child.:fir ...
最新文章
- [kuangbin带你飞]专题七线段树 更新ing
- Android平台根目录文件
- 爬虫学习笔记(二)——使用 requests 爬取百度图片
- 修改SAP系统字段描述的方法
- 【C语言】单链表的所有操作的实现(包括PopBack、PushBack、PopFront、PushFront、Insert)
- 我了解到的面试的一些小内幕!顺利通过阿里Android岗面试
- beautifulsoup网页爬虫解析_Python爬虫3步曲:5分钟学习用Python解析网页
- explain ref_explain的属性详解与提速百倍的优化示例
- 人工神经网络分析方法,神经网络数据分析步骤
- 学计算机要数学吗,学习计算机真的需要数学能力超强吗?
- 深度学习中的多任务学习介绍
- 微信小程序保存图片至手机相册
- 《可复制的领导力》脑图
- 手动测量变量溢出长度
- CentOS8安装与配置jdk1.8 与远程分发复制jdk到另一个虚拟机
- stl格式文件导入Unity
- 阿里柏羲带你读tomcat源码
- 一个人对家的态度藏着最真实的人品
- windows下的docker学习
- 深度学习三十问!一位算法工程师经历30+场CV面试后总结的常见问题合集(含答案)...
热门文章
- Two Strings(CF-223B)
- 搜索 —— 广搜的优化技巧
- Palindromic Twist(CF-1027A)
- hive load data inpath 空目录_hive学习笔记之四:分区表
- C++:错误(活动) E0144 “const char *“ 类型的值不能用于初始化 “char *“ 类型的实体
- Python Itertools.chain()用法【将一组迭代对象串联起来,形成一个更大的迭代器】
- COCO数据集提取自己需要的类,转VOC
- layui复选框:被js操作checked切换并显示状态(含案例、代码)
- (个人使用)uni-app开发(官方资源)· 汇总
- 一款好看的html动态跳转页源码