這篇文章要跟大家分享一篇關於css中偽元素::before和::after的三個用法,有需要的朋友可以參考一下。
對於:: before和::after的偽元素,在上一篇文章中使用css中:after偽元素來創建了一個很好的疊加效果。但除了這個,他們還有很多其他的用途。這篇文章將要為大家介紹::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線上手冊。
為容器添加有趣的「邊框」
在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); }
在此範例中,我們將背景漸層套用於父元素,並使用:: 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; }
在這個例子中,我們也將偽元素置於絕對位置。我們的「邊界」的大小取決於新元素的高度。如果這是一個右邊或左邊的“邊框”,你可以使用元素寬度來確定尺寸。
由於這只是頁面上的一個元素,我們也可以讓邊界偏斜。
新增不需要加入樣式標記的樣式元素
b8a712a75cab9a5aded02f74998372b4是一個很好的語意元素。我們不要用額外的標記來破壞它。
在許多:: after範例(包括本文中的其他範例)中,您可以看到偽元素position: absolute,當然沒有規則說這必須是這種情況。
讓我們使用:: before和:: after作為grid-items在a上放置引號b8a712a75cab9a5aded02f74998372b4。
透過將所有內容明確地放在網格上,我們不必擔心額外的包裝器。我們也可以使用引號作為背景圖像,並允許它們minmax在我們的簡單函數中進行縮放grid-template-columns。
最後
其實對於css偽元素:: after和:: before有很多的用法,大家的實際應用中應該也會用到,有更好的用法,歡迎大家留言探討。
以上是css偽元素::before和::after的三個用法介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!