css中的偽元素before和after怎么使用

發(fā)布時間：2022-03-03 09:29:49 來源：億速云閱讀：233 作者：小新欄目：web開發(fā)

小編給大家分享一下css中的偽元素before和after怎么使用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　::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怎么使用

看完了這篇文章，相信你對“css中的偽元素before和after怎么使用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

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

猜你喜歡