這篇文章主要介紹了css偽元素::before和::after的使用方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

龍川網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),龍川網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為龍川上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的龍川做網(wǎng)站的公司定做！

對于:: before和::after的偽元素，在上一篇文章中使用css中:after偽元素來創(chuàng)建了一個很好的疊加效果。但是除了這個，他們還有很多其他的用途。這篇文章將給大家介紹一下::before和::after的其他三個用法。

首先我們來簡單看一下偽元素是如何工作的。

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

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

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

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

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

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

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

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

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

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

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)部鏈接編寫為相對路徑，我們找到任何具有以http開頭的href元素的錨標(biāo)記。

此方法的另一個好用的例子是PDF

a[href$=".pdf"]::after {
    content: " (pdf)";
    font-size:  .8em;
    color: tomato;
}

對于任何以.pdf結(jié)尾的href，我們可以附加字符串“（pdf）。”這個:: after元素比圖像更容易控制，因為我們有完整的CSS控件，可以調(diào)整字體大小，顏色和任何其他效果。

有關(guān)這些選擇器的更多信息，大家可以參考創(chuàng)新互聯(lián)的css在線手冊。

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

在Houdini Paint API訪問所有瀏覽器之前，您可能會覺得您的元素非常無聊。但使用簡單的CSS和:: before和:: after，您可以為所有瀏覽器帶來一些更有趣的效果。

.related-article {  
    padding: 20px;
    position: relative;
    background-image: linear-gradient(120deg,#eaee44,#33d0ff);
}
.related-article * {
    position: relative; // Set stacking context to keep content on top of the background
}
.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元素以簡單的背景顏色“剪切”內(nèi)部。盡管是兩個矩形，但這給出了邊框的外觀。要獲得適合邊框的尺寸，只需要一些簡單的數(shù)學(xué)運算。

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

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

我們可以使用:: after元素來實現(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;
}

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

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

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

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

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

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享css偽元素::before和::after的使用方法內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學(xué)習(xí)!

網(wǎng)站標(biāo)題：css偽元素::before和::after的使用方法
標(biāo)題網(wǎng)址：http://newbst.com/article4/jhcsoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、電子商務(wù)、品牌網(wǎng)站設(shè)計、網(wǎng)站排名、企業(yè)網(wǎng)站制作、網(wǎng)站改版

廣告

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