CSS中偽元素before和after如何使用

發(fā)布時(shí)間：2022-03-03 09:23:40 來源：億速云閱讀：151 作者：小新欄目：web開發(fā)

這篇文章主要介紹CSS中偽元素before和after如何使用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　::before和::after是什么？

　　before和after的描述如下

　　元素::before{content:插入的內(nèi)容;}

　　元素::after{content:插入的內(nèi)容;}

　　content：輸入要插入的部分內(nèi)容

　　要在content中插入字母和符號，請用“”括起來并輸入。

　　要在content中插入圖像和聲音，請輸入url（目標(biāo)路徑）。

　　也可以為同一元素指定before和after。

　　CSS3中before和after等偽元素使用::（雙冒號），但即使只有一個冒號，它在大多數(shù)瀏覽器中也能識別并正常工作。

　　支持的瀏覽器

　　支持::before和::after偽元素的瀏覽器：Chrome、Firefox3.5~、Safari4~、IE8~、Opera6~。

　　如何使用偽元素before和after？

　　下面是一個應(yīng)用before和after的HTML文件

　?。ㄟ@是*html和css文件位于同一目錄且外部樣式表的文件名為“sample.css”的示例）

　　HTML

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8"/>

　　<linkrel="stylesheet"href="sample.css"type="text/css">

　　</head>

　　<body>

　　<h4>標(biāo)題前加入標(biāo)記</h4>

　　<p>段落前插入圖像</p>

　　</body>

　　</html>

　　sample.css

　　h4::before{

　　content:"◆";

　　}

　　p::before{

　　content:url(img/luffys.jpg);

　　}

　　在此示例中，符號“&diams;”在<h4>的標(biāo)題之前插入，<p>的段落之前插入圖像文件“img/luffys.jpg”。

　　它在瀏覽器上顯示如下：標(biāo)題前有“◆”，在段落前面插入了一個圖像文件。

以上是“CSS中偽元素before和after如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

猜你喜歡