css偽元素::before和::after怎么使用

這篇文章主要介紹“css偽元素::before和::after怎么使用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css偽元素::before和::after怎么使用”文章能幫助大家解決問(wèn)題。

創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元象山做網(wǎng)站,已為上家服務(wù),為象山各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

首先我們來(lái)簡(jiǎn)單看一下偽元素是如何工作的。

關(guān)于使用::after和::before的注意事項(xiàng)

當(dāng)且僅當(dāng)它們具有content屬性值時(shí)，瀏覽器才會(huì)將這些元素呈現(xiàn)為“生成的內(nèi)容”。該值可以設(shè)置為空字符串：content:"";。

當(dāng)瀏覽器將此元素插入DOM時(shí)，它會(huì)將其插入到用于選擇器的元素中。這是規(guī)范中的定義：

::before表示在原始元素的實(shí)際內(nèi)容之前表示一個(gè)可設(shè)置樣式的子偽元素

::after在原始元素的實(shí)際內(nèi)容之后立即表示一個(gè)可設(shè)置樣式的子偽元素。

默認(rèn)情況下，此新元素將是內(nèi)聯(lián)元素。將元素插入DOM后，可以像修改其他元素一樣對(duì)其進(jìn)行修改。這給了我們很多控制權(quán)來(lái)獲得各種。

重要說(shuō)明：并非所有瀏覽器/屏幕閱讀器組合都能讀取您放置在content偽元素中的內(nèi)容。這應(yīng)該只用于文本元素。應(yīng)始終將真實(shí)內(nèi)容添加到頁(yè)面的標(biāo)記中。

在某些類型的鏈接旁邊添加圖標(biāo)

如果您想為用戶提供有關(guān)鏈接的更多可視信息，可以使用::after添加圖標(biāo)而不添加標(biāo)記。

將“外部鏈接”圖標(biāo)添加到非絕對(duì)鏈接的鏈接處。

a[href^="http"]::after{

background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/open-in-new.svg);

background-size:contain;

content:"";

display:inline-block;

vertical-align:middle;

width:1em;

height:1em;

}

在此代碼中，假設(shè)將內(nèi)部鏈接編寫(xiě)為相對(duì)路徑，我們找到任何具有以http開(kāi)頭的href元素的錨標(biāo)記。

此方法的另一個(gè)好用的例子是PDF

a[href$=".pdf"]::after{

content:"(pdf)";

font-size:.8em;

color:tomato;

}

對(duì)于任何以.pdf結(jié)尾的href，我們可以附加字符串“（pdf）?！边@個(gè)::after元素比圖像更容易控制，因?yàn)槲覀冇型暾腃SS控件，可以調(diào)整字體大小，顏色和任何其他效果。

有關(guān)這些選擇器的更多信息，大家可以參考PHP中文網(wǎng)的css在線手冊(cè)。

為容器添加有趣的“邊框”

在HoudiniPaintAPI訪問(wèn)所有瀏覽器之前，您可能會(huì)覺(jué)得您的元素非常無(wú)聊。但使用簡(jiǎn)單的CSS和::before和::after，您可以為所有瀏覽器帶來(lái)一些更有趣的效果。

.related-article{

padding:20px;

position:relative;

background-image:linear-gradient(120deg,#eaee44,#33d0ff);

}

.related-article*{

position:relative;//Setstackingcontexttokeepcontentontopofthebackground

}

.related-article::before{

content:"";

background-color:#fff;

display:block;

position:absolute;

top:10px;

left:10px;

width:calc(100%-20px);

height:calc(100%-20px);

}

在此示例中，我們將背景漸變應(yīng)用于父元素，并使用::before元素以簡(jiǎn)單的背景顏色“剪切”內(nèi)部。盡管是兩個(gè)矩形，但這給出了邊框的外觀。要獲得適合邊框的尺寸，只需要一些簡(jiǎn)單的數(shù)學(xué)運(yùn)算。

通過(guò)將偽元素定位為絕對(duì)值，我們可以控制其位置。Sass可以通過(guò)變量和數(shù)學(xué)函數(shù)使數(shù)學(xué)運(yùn)算變得更容易。

如果我們希望我們的標(biāo)題在它們下面有花哨的小邊框，那么如果不是一個(gè)完整的邊界呢？

我們可以使用::after元素來(lái)實(shí)現(xiàn)它。

.cool-border::after{

content:"";

display:block;

height:7px;

background-image:linear-gradient(120deg,#e5ea15,#00c4ff);

position:absolute;

top:calc(100%+5px);

left:50%;

width:45%;

transform:translateX(-50%)skew(-50deg);}.cool-border{

position:relative;

}

在這個(gè)例子中，我們還將偽元素置于絕對(duì)位置。我們的“邊界”的大小取決于新元素的高度。如果這是一個(gè)右邊或左邊的“邊框”，你可以使用元素寬度來(lái)確定尺寸。

由于這只是頁(yè)面上的一個(gè)元素，我們也可以使邊界偏斜。

添加不需要添加樣式標(biāo)記的樣式元素

<blockquote>是一個(gè)很好的語(yǔ)義元素。我們不要用額外的標(biāo)記破壞它。

在許多::after示例（包括本文中的其他示例）中，您可以看到偽元素position:absolute,當(dāng)然沒(méi)有規(guī)則說(shuō)這必須是這種情況。

讓我們使用::before和::after作為grid-items在a上放置引號(hào)<blockquote>。

通過(guò)將所有內(nèi)容明確地放在網(wǎng)格上，我們不必?fù)?dān)心額外的包裝器。我們也可以使用引號(hào)作為背景圖像，并允許它們minmax在我們的簡(jiǎn)單函數(shù)中進(jìn)行縮放grid-template-columns。

關(guān)于“css偽元素::before和::after怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

本文標(biāo)題：css偽元素::before和::after怎么使用
當(dāng)前URL：http://bm7419.com/article32/jdihpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、用戶體驗(yàn)、、微信小程序、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)