介绍 #例子:before {
,,,内容:,“#”;
,,,颜色:,红色;
}
,
#例子:after {
内容,,,:,“,“美元;;
,,,颜色:,红色;
} & lt; div 类=皅uote"比;
,,,& lt; span>小户型& lt;/span>
& lt;/div>
.quote:之前,.quote:{//后用这两个伪类实现样式渲染
,,,,内容:““;
,,,,显示:inline-block;
,,,,宽度:5%;
,,,,保证金:5 px 1%;
,,,,边界底部:1 px solid 蓝色;
}
//css代码
.box1 {
,,,,宽度:300 px;
,,,,身高:200 px;
,,,,背景颜色:,浅灰色;
,,,,浮动:左;
}
.box2 {
,,,,宽度:300 px;
,,,,身高:100 px;
,,,,背景颜色:,lightblue;
,,,,浮动:左;
}
.parent2 {
,,,,宽度:400 px;
,,,,身高:,400 px;
,,,,背景颜色:蓝色;
,,,,颜色:# fff;
,,,,text-align:中心;
,,,,行高:400 px;
,,,,字体大小:30 px;
} 本篇内容介绍了css3中”的伪类之前和之后怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
之前/之后伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简代化HTML码,提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识,要使用顶多也就是跟风的“清除浮动”应用。
<强> 1。基本用法
<强>:和:之前之后的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含内容属性指定内容的行内元素,最基本的用法如下:
这两个伪类都属于内联元素,但是用显示:块;属性可以将其转换成块状元素,比较常见的用法就是<强>样式的一些实现,还有就是清除浮动强的效果. .
<强> 2。样式修改
代码如下所示:
实现效果如下图所示:
& lt; div 类=皃arent"比;
,,,& lt; div 类=癰ox1"祝辞& lt;/div>
,,,& lt; div 类=癰ox2"祝辞& lt;/div>
& lt;/div>
& lt; div 类=皃arent2"祝辞parent2
因为浮动的问题,实现效果如下所示:
.parent:{后
,,,,内容:““;
,,,,显示:块;//设为块状元素
,,,,明确:两个,,,,//用这个属性来清除浮动
}
达到的效果如下图所示:
