css:before和:after

2020/11/9 8:51:07   阅读:2184    发布者:2184


:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。

<style>
    p:before{
        content: "H"  /*:before和:after必带技能,重要性为满5颗星*/
    }
    p:after{
        content: "d"  /*:before和:after必带技能,重要性为满5颗星*/
    }
  </style>
  <p>ello Worl</p>


以上的代码将会在页面中展现的是"Hello World"
p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是"H";而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是"d"。
清除浮动 场景:当一个元素在众多设置了浮动样式float: left的后面,但是又要另起一行时;建议:强烈推荐;代码:.container::before { content: ""; display: table; } .container::after { clear: both; }
利用::before ::after伪类,动态的在元素开始和末尾增加标签这一特性,我们可以做出很多丰富的样式而且又减少了 DOM 的复杂度