全国服务热线:4008-888-888

技术知识

详细说明css3中的伪类before和af⊙ω⊙ter普遍使用方

before/after伪类非常于在原素內部插进2个附加的标识,其最合适也是最强烈推荐的运用便是图型转化成。在一些精美的UI完成上,能够简单化HTML编码,提升易读性和可维护保养性。海外这2个伪类运用非常的普及化及其强盛,但是好像大家这里前端开发er们广泛欠缺应用这2个伪类的观念,要应用最多也便是盲目跟风的“消除波动”运用。

1.基本使用方法

:before和:after的功效便是在特定的原素內容(而并不是原素自身)以前或是以后插进一个包括content特性特定內容的内行人原素,最基本的使用方法以下:

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

这2个伪类都归属于内联原素,可是用display:block;特性能够将其变换成块状原素,较为普遍的使用方法便是款式的一些完成,也有便是消除波动的实际效果。。

2.款式改动

编码以下所显示:

<div class="quote">
    <span>小户型房子</span>
</div>
.quote:before,.quote:after{//用这2个伪类完成款式3D渲染
     content:"";
     display:inline-block;
     width:5%;
     margin:5px 1%;
     border-bottom:1px solid blue;
}

完成实际效果以下图所显示:

3.消除波动

编码以下所显示:

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="parent2">parent2</div>
//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內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服