CSS ::after 偽元素
更多“自己嘗試”的例子見下文。
定義和用法
::after 偽元素在指定元素的**內容之後**插入一些內容。
使用 content 屬性指定要插入的內容。 content 的值可以是：
- 字串： content: "你好，世界!";
- 圖片： content: url(myimage.jpg);
- 無： content: none;
- 計數器： content: counter(li);
- 引號： content: close-quote;
- 屬性值： content: " (" attr(href) ")";
提示： 請注意，插入的內容仍然在指定元素的**內部**。插入的內容是在其他內容之後新增的。
使用 ::before 在指定元素的**內容之前**插入一些內容。
| 版本 | CSS2 |
|---|
瀏覽器支援
表中數字表示首次完全支援此偽元素的瀏覽器版本。
| 偽元素 | |||||
|---|---|---|---|---|---|
| ::after | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
CSS 語法
::after {
CSS 宣告;
}
更多示例
示例
在每個 <p> 元素的**內容之後**插入一個字串，並對插入的內容進行樣式設定
p::after {
content: " - 記住它";
background-color: yellow;
color: red;
font-weight: bold;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 偽元素
CSS 偽元素參考： ::before
