css:before和:after

: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 的复杂度

除了console.log调试外,还有那些浏览器打印调试
« 上一篇 2020年11月9日 上午12:00
JS中this关键字
下一篇 » 2020年11月9日 上午12:00