详解css3中的伪类before和after常见用法CSS伪类:empty让我眼前一亮(实例代码)浅谈CSS 伪元素&伪类的妙用CSS 伪类修改input选中样式的示例代码css伪类 右下角点击出现 对号角标表示选中的示例代码css选择器四大类：基本、组合、属性、伪类详解如何使用CSS3中的结构伪类选择器和伪元素选择器解决移动端跳转问题(CSS过渡、target伪类)css3 伪类选择器快速复习小结CSS新增的:where和:is伪类函数是什么

before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛，不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识，要使用顶多也就是跟风的“清除浮动”应用。

1.基本用法

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

 #example:before { content: "#"; color: red; } #example:after { content: "$"; color: red; }

这两个伪类都属于内联元素，但是用display:block；属性可以将其转换成块状元素，比较常见的用法就是样式的一些实现，还有就是清除浮动的效果。。

2.样式修改

代码如下所示:

小户型
 .quote:before,.quote:after{//用这两个伪类实现样式渲染 content:""; display:inline-block; width:5%; margin:5px 1%; border-bottom:1px solid blue; }

实现效果如下图所示：

3.清除浮动

代码如下所示：

parent2
 //css代码 .box1{ width:300px; height:200px; background-color: lightgray; float:left; } .box2{ width:300px; height:100px; background-color: lightblue; float:left; } .parent2{ width:400px; height: 400px; background-color:blue; color:#fff; text-align:center; line-height:400px; font-size:30px; }

因为浮动的问题，实现效果如下所示：

如果在上面代码中加上这段代码用来清除浮动则会达到不一样的效果：

 .parent:after{ content:""; display:block;//设为块状元素 clear:both; //用这个属性来清除浮动 }

达到的效果如下图所示:

到此这篇关于详解css3中的伪类before和after常见用法的文章就介绍到这了,更多相关css3伪类before和after内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！