css3伪元素探究:before和after
::before
和::after
伪元素在网页中有着各种的应用,比如清除浮动,作为字体图标等进行使用;但是一直很好奇这两个伪元素与设置元素(设置元素指的是设置伪元素的依赖元素)之间到底是何种关系,以及相当于何种标签元素。
before和after伪元素的默认属性
::before
和::after
伪元素实际上就是在设置元素内处于『特殊』位置的子元素。
样式
::before
和::after
伪元素的默认css
样式就相当于行内元素,与<span>
元素类似。
位置
::before
伪元素就相当于在设置元素内通过prepend
(即前插)的方式插入一个行内元素;同理,::after
伪元素相当于在设置元素内通过append
(即后插)的方式插入的一个行内元素。
文本
::before
和::after
伪元素可以通过content
属性来设置显示的文本,就相当于DOM
节点的innnerText
属性。
before和after伪元素的使用
其实知道这两个伪元素的性质之后,基本上就可以把它们视为普通的行内元素来使用,只不过不需要通过在html
代码中添加,而是通过css
样式来控制,甚至可以『批量』控制。而且作为『特殊』性质的默认位置,也可以通过position
属性来轻松改变。