CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与

2021-01-20 13:20 jianzhan
:before 伪元素在元素以前加上內容.

此款式会在每一个 h2元素以前播发1段响声:

拷贝编码
编码以下:

h2:before
{
content:url(beep.mp3);
}

假如已要求 !DOCTYPE,那末 Internet Explorer 8 (和更高版本号)才适用 content 特性。

CSS伪元素(Pseudo Element):after与:before

估算大伙儿非常少用到这些 ,可是在技术性迅猛发展的如今,我感觉大家不可以一天到晚把時间消耗在适配IE6上!
先看1下:after与:before甚样子:
HTML中仅有1个P标识,P里边有1写作字:

<p>
1行检测文本
</p>
CSS中的设定:

拷贝编码
编码以下:

p:before,p:after{
content:"$$";
}

实际效果如图所示:

除文本能够跟內容产生关联外,照片还可以哦:

拷贝编码
编码以下:

p:before,p:after{
content:url(Gravatar.jpg);
}

如何,到了这里,你是否有甚么想说的或想做的呢?可不能以用这个方式来试试之前的float精准定位排版的方式呢?或用它来做1些更高級的物品呢?
比如,我如今想在网页页面中完成以下图所示的排版,便可以用这类方式。

大家能够content的许多特性,如display、position、background……,您是不是想起了呢?
此外,运用:after、:before还能够完成多情况变幻莫测的实际效果哦,动手能力做做吧,我想这应当会让你激动1会儿的,哈哈!