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

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

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

　　關于使用::after和::before的注意事項

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

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

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

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

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

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

　　在某些類型的鏈接旁邊添加圖標

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

　　將“外部鏈接”圖標添加到非絕對鏈接的鏈接處。

　　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;

　　}

　　在此代碼中，假設將內部鏈接編寫為相對路徑，我們找到任何具有以http開頭的href元素的錨標記。

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

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

　　content:"(pdf)";

　　font-size:.8em;

　　color:tomato;

　　}

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

　　有關這些選擇器的更多信息，大家可以參考PHP中文網的css在線手冊。

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

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

　　.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);

　　}

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

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

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

　　我們可以使用::after元素來實現它。

　　.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;

　　}

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

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

　　添加不需要添加樣式標記的樣式元素

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

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

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

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

關于“css偽元素::before和::after怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。