首頁 >web前端 >css教學 >css after是什麼

css after是什麼

藏色散人
藏色散人原創
2020-12-03 10:57:0810206瀏覽

css after是CSS中的選擇器,該選擇器可用於在被選取元素的內容後面插入內容,其語法如「p:after{ content:"";background-color:yellow ;color:red;}」。

css after是什麼

本文操作環境:windows7系統、Dell G3電腦、css3版。

推薦:《css影片教學

在CSS中,:after偽類別的作用就是在指定的元素內容(而不是元素本身)之後插入一個包含content屬性指定內容的行內元素。

最基本的用法如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
p:after {
content: "- 台词";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</body>
</html>

效果圖:

css after是什麼

#after偽類的一些應用

: after清除浮動

浮動佈局導致高度坍塌影響到整體佈局時元素需要清除浮動,使用:after就是其中的一種方法:

.row:after {
width:0;
height:0;
content:&#39;&#39;;
display: block;
clear: both;
}

偽類和偽元素

偽類別選擇元素基於的是目前元素處於的狀態,或者說元素目前所具有的特性,而不是元素的id、class、屬性等靜態的標誌。由於狀態是動態變化的,所以當一個元素達到一個特定狀態時,它可能會得到一個偽類的樣式;當狀態改變時,它又會失去這個樣式。由此可以看出,它的功能和class有些類似,但它是基於文件之外的抽象,所以叫偽類。

與偽類針對特殊狀態的元素不同的是,偽元素是對元素中的特定內容進行操作,它所操作的層次比偽類更深了一層,也因此它的動態性比偽類要低得多。實際上,設計偽元素的目的就是去選取諸如元素內容第一個字(母)、第一行,選取某些內容前面或後面這種普通的選擇器無法完成的工作。它控制的內容實際上和元素是相同的,但是它本身只是基於元素的抽象,並不存在於文件中,所以叫偽元素。

以上是css after是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn