浅谈css的伪元素::after和::before
https://blog.csdn.net/w405722907/article/details/79446038
参考:
:after和:before的作用及使用方法
1. :before 和 :after 的主要作用是在元素内容前后加上指定内容,示例:
HTML代码:
<p>你好</p>
CSS代码:
p:before{ content: 'Hello'; color: red; } p:after{ content: 'Tom'; color: red; }
效果如图:
你好
以上代码是:before和:after的基本用法,但是这两种伪类还有很多更方便的用法。
2. :after清除浮动
元素设置浮动以后,其父元素以及父元素的兄弟元素的布局都会受到影响,如父元素的背景边框不能正常显示,父元素的兄弟元素位置布局错误等,
为了避免这种浮动带来的影响必须要清除浮动,:after就是其中的一种方法。
CSS代码:
ul:after{
content: '';
display: block;
width: 0;
height: 0;
clear: both;
}
3. :before和:after 用来写小三角形
在日常的工作中会经常遇到小三角形这样的小图标,可以用添加图片的方式实现,但是更方便的是用:after :before伪类来实现。
HTML代码:
<div class="demo">这是一个测试</div>
CSS代码:
.demo:after{
content: '';
display: inline-block;
width: 0;
height: 0;
border: 8px solid transparent;
border-left: 8px solid #AFABAB;
position: relative;
top: 2px;
left: 10px;
}
效果如图所示:
这是一个测试
这样就可以在文字后面添加一个小三角形啦,是不是很方便
*, *:before, *:after { box-sizing: inherit; }
星号不是css3的吧,星号是选择器,代表所有元素的意思,这里的作用,是让所有的元素的盒子模型继承父类,详情看:*选择器
星号不是css3的吧,星号是选择器,代表所有元素的意思,这里的作用,是让所有的元素的盒子模型继承父类,详情看:*选择器