html中after后面添加文字,使用CSS3伪类元素(::before|::after)对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源。所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法。
对一个文字进行美化
左右型美化
HTML代码
CSS3伪类元素(::before|::after),文字进行美化
库
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代码里添加多行标签包含的字就可以了。代码如下
CSS3伪类元素(::before|::after),多个文字美化
云
库
网
上下型
上下型有两种方法,一种跟例子3的代码差不多,只需要把width:50%修改成height:50%就可以了。还有一种方法,除了要把 width:50%修改成height:50%,还需要在一个标签里添加多个文字,这种方法其实是最简单的。HTML代码如下
CSS3伪类元素,文字进行美化
云库网
使用CSS3伪类元素(::before|::after)对文字进行美化
动态文字美化
我们先从一个最简单的例子开始
HTML代码
CSS3伪类元素,动态文字进行美化
云库网
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可以根据个人需要进行更改。
从上面的例子中我们可以看出用一个元素把每个文字 包含起来会更方便,不管是左右型还是上下型都适用。对于上下型的话,就看你想用哪一种效果了。
要每个字单独出来的HTML代码如下
云
库
网
所有文字在一个标签里HTML代码如下
云库网
但他们有一个共同点,那就是CSS样式不需要改动。
相关
Related Posts
推荐10款非常优秀的 HTML5 开发工具
HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写…
超链接特效
这里提供了各种各样的超链接特性,有些是借助伪元素,有些是借助svg,有些是借助HTML5动画。用你的鼠标悬停在这些链接上,给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器,比如谷歌浏览器或火狐浏览器。 Demo:http://www.webhek.com/misc/link-style/
CSS发抖
在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。 当开发完成后,我发现了这个很酷的jQuery plugin(由@jackrugile开发)。 于是我就开始思考,我应该做出这个小的CSS project。 CSS发抖 DEMO …
html中after后面添加文字,使用CSS3伪类元素(::before|::after)对文字进行美化相关推荐
- 使用CSS3伪类元素(::before|::after)对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源.所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法. ...
- css3伪类图解,CSS3伪类元素详解/深入浅出
很多朋友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和C ...
- html怎么添加伪类,css3伪类怎么用
css3伪类怎么用 1.使用场景一:插入内容 假设我们有如下的HTML代码 paragraph text 我们可以用伪元素添加内容比如:p:before { content: "this i ...
- css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略
0804 css3伪类 target 突出显示活动的 HTML 锚 div:target{background: #0e3757;} 表单控件伪类 <style>input:enabled ...
- CSS 伪类选择器:如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
- css3伪类和伪元素基本使用
一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:target,:not(),:focus. 常见伪元素--::first-let ...
- html伪类元素加图片,HTML中常见伪类和伪元素的区别
原标题:HTML中常见伪类和伪元素的区别 提到伪类,在我的印象中最常用的不过是:hover.:active.:link.:visited,还有css3里的常用伪类选择器:last-child.:fir ...
- CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
- CSS3 伪类和伪元素
CSS3 伪类和伪元素 伪类 静态伪类 动态伪类 伪元素 伪类 元素在不同状态表现不同样式,如点击a标签文本变红,放开变紫 静态伪类 只能用于超链接,用得少 :link 超链接未点击前的样式 :vis ...
最新文章
- 吐司面包的做法_无糖粗粮吐司面包的做法+配方,超柔超软,一次发酵
- 《系统集成项目管理工程师》必背100个知识点-11系统集成供应商内部立项的原因和内容
- redis基础之订阅发布、主从复制和事务(四)
- 批处理如何清除文本文档里面的重复行
- jquery对Select的操作
- Shell脚本中函数的定义和调用笔记
- Scala 入门3(类、Trait、模式匹配、正则、异常、提取器、IO)
- linux 信号发生器,用STM32实现函数信号发生器
- iOS 11之Vision人脸检测
- Redmi 10X Pro样张首曝:搭载流光相机技术 一键成创意大片
- VC++ (四)动态内存
- css浮动与清除浮动相关总结(附图解、实例)
- VS选中cpp文件后定位其在解决方案管理器中属于哪个项目
- 机器人控制器编程课程-教案02-基础
- solidworks出专利图小技巧
- 安氏图书报刊发行管理软件[酷软推荐]
- 劳务派遣经营许可证怎样办理
- 红米手机root之后 eclipse无法打开data目录
- 清华大学机械系研发微小型管道机器人,实现亚厘米级管道高效探测
- English trip V1 - 11.What's That? 那是什么?Teacher:Patrick Key:There's/There are