偽元素
偽元素 用于在元素的內容前后或特定部分插入虛擬元素,并為其添加樣式,無需修改 HTML 結構。
語法:使用雙冒號 ::
(現代規范)
以下是一些常見的CSS偽元素的示例:
1.::before
: 在元素內容的前插入虛擬元素。
2.::after
: 在元素內容的后插入虛擬元素。
3.::first-line
: 選擇元素的第一行文本。
4.::first-letter
: 選擇元素的首字母。
5. ::selection
: 設置用戶選中文本的樣式
6.::placeholder
: 設置輸入框占位符文本的樣式
偽元素的一些簡單示例:
清除浮動
.clearfix::after {content: "";display: block;clear: both;
}
自定義列表符號
ul li::before {content: "?";color: red;margin-right: 8px;
}
偽元素在HTML頁面使用實例:
<!DOCTYPE html>
<html>
<head><title>CSS偽元素示例</title><style>/* 在元素的內容前插入新內容并設置樣式 */h1::before {content: "-> "; color: blue;}/* 在元素的內容后插入新內容并設置樣式 */p::after {content: " (end)";color: red;}/* 選擇元素的第一行文本并設置樣式 */p::first-line {color: green;font-weight: bold;}/* 選擇元素的第一個字母并設置樣式 */p::first-letter {font-size: 24px;color: orange;}</style>
</head>
<body><h1>Title</h1><p>This is a paragraph of text. </p>
</body>
</html>