::before 和 ::after其实就是附着在元素前后的伪元素。
说他是“伪”元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候添加上去的。

如果百度它们，会发现有双冒号(::)和单冒号(:)两种写法。那是因为一开始伪元素用的是单冒号(:)，后面有人觉得单冒号(:)跟伪类（:hover之类）无法区分了。于是W3C在CSS3中，把伪元素就改成了双冒号(::)。
不过浏览器为了保证兼容性，同时支持双冒号(::)和单冒号(:)。主流浏览器中，只有IE8只支持单冒号，如果项目不需要IE8支持，就用双冒号(::)吧。

PS：其实IE8现在也过时了。

基本使用方法如下：

 <style>.d1::before{content:"#"}.d1::after{content:"?";}
</style><div class="d1">这个是div</div>

这个两个伪元素的content属性，表示伪元素的内容。设置::before和::after时必须设置其content属性，否则伪元素就不起作用。

`content`属性的值具体有以下几种情况：

1、字符串

字符串作为伪元素的内容添加到主元素中。如上面的代码，就是给 ::before 添加了 “#”字符串，给::after添加了“？”字符串作为内容。

注意：字符串中若有html字符串，添加到主元素后不会进行html转义，也不会转化为真正的html内容显示，而是会原样输出。

<style>.d1::before{content:"<h1>你好</h1>";}
</style><div class="d1">这个是div</div>

2、attr(attr_name)

伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值

好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果。

比如，显示超链接的href地址。

a:after { content: attr(href) ;
}

3、url()/uri()

引用外部资源，例如图片。比如：

h1::before { content: url(logo.png);
}

4、counter()

调用计数器，可以不使用列表元素实现序号问题。

接下来通过几个小梨子来谈谈以上用法的妙处：

1、给图片添加特殊阴影。可以参考本文章

2、制作照片堆叠效果

 <style>.d1{margin: 50px;width: 682px;height: 458px;position: relative;box-shadow: 2px 2px 5px rgba(0,0,0,0.2);}.d1 img{border:1px #ccc solid;padding: 5px;background: #fff;}.d1::before{transform: rotateZ(-2deg);}.d1:after{transform: rotateZ(2deg);}.d1::before,.d1::after{content: "";position: absolute;display: block;z-index: -1;top: 0;left: 0;right:0;bottom:0;padding: 5px;border:1px #ccc solid;background: #fff;}
</style><div class="d1"><img  src="data:images/1.jpg" alt="美女图">
</div>

3、时间线

 <style>*{margin: 0;padding: 0;}ul,li,ol{list-style: none;}.timeList{margin-left: 100px;}.timeList li{position: relative;   /*相对定位，这个很重要*/line-height: 24px;font-size: 16px;padding-bottom: 10px;}.timeList li::before{content: "";display: block;width: 10px;height: 10px;background: #ddd;border-radius: 10px;left:-20px;top:6px;position: absolute;z-index: 1;}.timeList li::after{content:"";display: block;width: 2px;position: absolute;top:0;height: 100%;    /*线条高度都为 100%，跟li高度一致*/left:-16px;background: #ddd;}.timeList li:first-child::after{    /*修正第一个标签的线条位置*/top:7px;}.timeList li:last-child::after{      /*修正最后一个标签的线条高度*/height:10px;}.timeList li.now::before{background: #f30;}
</style>
<ul class="timeList"><li>2016年，我来到了重庆工程学院。</li><li class="now">2019年，我遇到了你。</li><li>2020年，我遇到了他。</li><li>2021年，我们继续努力着。</li>
</ul>

同理，也可以制作出进度线。如图所示：

4、模拟有序列表

<style>.list{counter-reset: number;line-height: 24px;}.list >li{margin-bottom: 4px;}.list>li::before{counter-increment: number;  /*数据增长*/content: counter(number);   /*内容是计数器*/margin-right: 10px;background: #f30;color: #fff;display: inline-block;width: 24px;height: 24px;vertical-align: middle;text-align: center;}.list>li:nth-child(n+4)::before{background: #666;}
</style><ul class="list"><li>2016年，我来到了重庆工程学院。</li><li>2019年，我遇到了你。</li><li>2020年，我遇到了他。</li><li>2021年，我们继续努力着。</li><li>2022年，我们继续努力着。</li></ul>

 <style>.list2{margin-left: 100px;}.list2{counter-reset: number;line-height: 24px;}.list2 >li{margin-bottom: 4px;}.list2>li::before{counter-increment: number;  /*数据增长*/content: counters(number,".");   /*内容是计数器。注意跟上一个代码的区别，层级列表*/margin-right: 10px;background: #f30;color: #fff;display: inline-block;width: 24px;height: 24px;vertical-align: middle;text-align: center;}.list2>li:nth-child(n+4)::before{background: #666;}</style><ul class="list2"><li>2016年，我来到了重庆工程学院。</li><li>2019年，我遇到了你。</li><li>2020年，我遇到了他。</li><li>2021年，我们继续努力着。<ul class="list2"><li>2016年，我来到了重庆工程学院。</li><li>2019年，我遇到了你。</li><li>2020年，我遇到了他。</li><li>2021年，我们继续努力着。</li><li>2022年，我们继续努力着。</li></ul></li><li>2022年，我们继续努力着。</li></ul>

5、做一些炫酷的导航。点击看这里

此外，大名鼎鼎的字体图标，其实也用了伪标签来制作内容，这里就不铺开了。

还有其他例子，后面想起了再来补充。

CSS3中伪元素::before和::after的经典用法相关推荐

CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
css3 中background的新增加的属性的用法(一)
关于background属性用法,相信许多重构人员都很熟悉了,在css3中,background属性依然保持以前的用法,不过可以允许在该属性中添加多个背景图像组,背景图像之间通过逗号进行分隔.增加了4 ...
详解html5新增的标签与css3中伪类和伪元素
html5 / css3 基础篇(第一篇) 回顾是的,你没看错!今天是一个全新的开始,今天这一讲我们就要开始h5和c3了,html 和 css的基础篇我们都告一段落了.html一共两篇,css走过了 ...
了解css中伪元素 before和after的用法
层叠样式表(CSS)主要用于将样式应用于HTML标签,但是在某些情况下,向文档添加额外标签元素是多余的或不可能的,CSS中实际上有一个特性允许我们在不中断实际文档的情况下添加额外标签,即伪元素. 你听 ...
css横向排列_CSS中伪元素和伪类的经典使用技巧
随着前端技术的发展,CSS样式的制作在网页中占据着十分重要的地位.前台页面的样式布局.以及展现给用户的体验效果都离不开CSS;虽然在实际的开发中会大量的使用一些主流的UI样式框架,但这些样式框架每一个 ...
IE8中伪元素动态作用样式不重绘bug记录
前阵子对公司框架的前端优化中,使用了字体图标(iconfont)来做模块的图标集,供用户进行配置选择. 字体图标的有非常好的灵活性和复用性,可以像处理文字一样通过font-size进行大小设置.通过c ...
鼠标经过下划线 css3,详解css3和伪元素实现鼠标移入时下划线向两边展开
本文主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料,文中先进行了详细的介绍,方便大家理解,而后给出了完整的实例代码让大家可以参考学习,需要的朋友们下面来一起学习学习吧.希望 ...
使用CSS 中伪元素:before 和:after 做简单的动画（以小米商城非首页 logo 动画为例）
刚开始学前端不久,发现小米商城的页面做的特别漂亮,前几天在B站找了一个视频,是闪购页面的,跟上做了一下,但是他的视频只有静态的基本页面,没有动画,我今天弄了小半天(还是技术太差,哈哈哈),终于算是做出 ...

CSS3中伪元素::before和::after的经典用法

`content`属性的值具体有以下几种情况：

1、字符串

2、attr(attr_name)

3、url()/uri()

4、counter()

1、给图片添加特殊阴影。可以参考本文章

2、制作照片堆叠效果

3、时间线

4、模拟有序列表

5、做一些炫酷的导航。点击看这里

CSS3中伪元素::before和::after的经典用法相关推荐

最新文章

热门文章

CSS3中伪元素::before和::after的经典用法

content属性的值具体有以下几种情况：

1、字符串

2、attr(attr_name)

3、url()/uri()

4、counter()

1、给图片添加特殊阴影。可以参考本文章

2、制作照片堆叠效果

3、时间线

4、模拟有序列表

5、做一些炫酷的导航。点击看这里

CSS3中伪元素::before和::after的经典用法相关推荐

最新文章

热门文章

`content`属性的值具体有以下几种情况：