|
阅读：5753回复：0
css中:before和:after伪元素的一些实用技巧(菜鸟心得)
“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。考虑到CSS3伪元素和伪类的规范性，以及浏览器兼容性，只需使用单引号（:before,:after）。
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。 :after是css中的一种伪元素，可用于在某个元素之后插入某些内容。 基本概念就不再赘述，下面是三种实用的使用方法。 1.使用:after来清除浮动。 清除浮动是一个时常会遇到的问题，解决办法可以是添加一个空的 div 应用 clear:both; 属性。同时除了使用overflow：hidden来解决浮动元素父元素塌陷问题，还可以使用:after伪类来清除浮动。不增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动： .clear-fix:after {
display: block;
content: "";
clear: both;
}2.使用:before或者是:after替代空标签来进行布局。 ①在网页布局时有时候会遇到给盒子添加一个蒙层的时候，除了给一个空的 div 盒子添加一些属性外，还可以使用 :after或者是:before再结合实际需求使用position进行定位，来完成同样的效果: .mask {
content: "";
display: block;
background-color: rgba(0, 0, 0, .5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}②在实现一些分段的分割线的效果的时候,可以结合:before和:after实现效果: 图片：)1TW}PWYN[6`E3@W6R7{3`L.png  如图，想要实现图中分割线的效果可以使用此方法： 给相应的元素添加（还需要一些其他代码支撑其整个盒子，只列出了伪类的代码）： mainButton:before{
height: 1px;
width: 10%;
opacity: .3;
background-color: #ce9e78;
display: inline-block;
vertical-align: middle;
content: "";
margin-right: 18px;
}mainButton:after {
height: 1px;
width: 10%;
opacity: .3;
background-color: #ce9e78;
display: inline-block;
vertical-align: middle;
content: "";
}同时，在按钮上还有两个边框叠加的效果，也可以通过伪类来实现。（设置边框和相应的padding大小等。） ③在对ul元素下的li进行hover时候，有时候需要以下框线的效果（如图）： 图片：V3G9_`UM9B72BNFUYO1~HS9.png 也可以通过:after来实现： ul > li > a:after {
position: absolute;
top: 50px;
left: 50%;
background-color: #80674c;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: width .2s ease;
content: "";
height: 2px;
width: 0;
}结合hover，可以实现指针浮动效果：ul > li > a:hover::after {
width: 80%;
-webkit-transition: width .2s ease;
transition: width .2s ease;
}以上是我最近练手时对:after和:before伪类用法的一些总结，有不足的地方请大佬指正。 引用： https://www.jb51.net/css/332483.html https://www.jb51.net/css/461830.html |
|
公众号
