<h2 CSS 偽元素 (Pseudo elements)實例</h2 <h3 CSS 實例</h3 CSS 背景實例 CSS 文本實例 CSS 字體(font)實例 CSS 邊框(border)實例 CSS 外邊距 (margin) 實例 CSS 內邊距 (padding) 實例 CSS 列表實....
CSS 偽元素 (Pseudo-elements)實例
CSS 實例
- CSS 背景實例
- CSS 文本實例
- CSS 字體(font)實例
- CSS 邊框(border)實例
- CSS 外邊距 (margin) 實例
- CSS 內邊距 (padding) 實例
- CSS 列表實例
- CSS 表格實例
- 輪廓（Outline)實例
- CSS 尺寸 (Dimension) 實例
- CSS 分類 (Classification) 實例
- CSS 定位 (Positioning) 實例
- CSS 偽類 (Pseudo-classes)實例
CSS 偽元素 (Pseudo-elements)實例
01製作首字母特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01製作首字母特效</title>
<style type="text/css">
p:first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body>
</html>
02製作首行特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02製作首行特效</title>
<style type="text/css">
p:first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>
CSS 偽元素 (Pseudo-elements) 總結
