伪元素的应用以及伪元素清除浮动

1.伪元素定义

概念：在当前元素内容的前面或者后面追加一个虚拟的标签

特点：

（1）.伪元素由CSS渲染，不会增加DOM开销；

（2）.伪元素默认为行内样式，可以转化成块级处理；

（3）.伪元素不管有没有内容，content这是值不能少，即使没有也要写成空；

（3）.伪元素官方推荐写成双冒号但为了兼容，写成单冒号；

（5）.因为伪元素是CSS渲染，js获取不到。

    <style>         .box::before{ content:'飞飞'; font-size: 30px;         }         .box::after{ content:'20'; font-size: 30px;         }     </style>      <div class="box">         的年龄是     </div>

2.伪元素清除浮动

<style> .contain{     width: 500px;     border: 1px solid #000; } .box{     width: 300px;     height: 300px;     background-color: red;     float: left; } .clearfix:after{     content:'';     clear: both;     display: block;    height: 0;   visibility: hidden;}

</style>       <div class="contain clearfix"> <div class="box"></div> </div>

 

来源：博客园

作者：宅到深夜

链接：https://www.cnblogs.com/zhaodz/p/11574044.html