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) 总结
