CSS - 伪元素 - ::first-letter

伪元素 ::first-letter 用于将特殊效果或样式应用于块级元素的第一行的第一个字母。仅当元素前面没有任何其他内容（如图像或内联表格）时，这才适用。

在以下情况下，伪元素 ::first-letter 适用于文本的首字母：

第一个字母之前或之后的标点符号将考虑在匹配中。
有些语言的二合字母一起大写，在这种情况下，二合字母的两个字母都通过伪元素 ::first-letter 匹配在一起。
当伪元素 ::before 和 content 属性组合在元素的开头添加一些文本时，伪元素 ::first-letter 将匹配新生成内容的首字母。

一小部分 CSS 属性可以与伪元素 ::first-letter 一起使用，如下所示：

Font 相关属性
Background 相关属性
Margin 相关属性
Padding 相关属性
Border 相关属性
Color 属性
text-decoration
text-shadow
text-transform
letter-spacing
word-spacing
如果 float 为 none：line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align

语法


selector::first-letter {
	 	/* ... */
}

CSS ：：first-letter 示例

下面是一个演示伪元素 ::first-letter 的简单用法示例：


<html>
<head>
<style>
	 	#flavor {
	 	 	 display: block;
	 	 	 font-size: 18px;
	 	 	 color: black;
	 	 	 width: 500px;
	 	}

	 	li {
	 	 	 padding: 5px 5px;
	 	 	 font-size: 16px;
	 	 	 color: black;
	 	 	 background-color: #fff;
	 	 	 margin-top: 25px;
	 	 	 width: 300px;
	 	 	 transition: all 0.3s ease;
	 	}

	 	li::first-letter {
	 	 	 font-size: 2em;
	 	 	 color: crimson;
	 	}
</style>
</head>
<body>
	 	<form>
	 	 	 <ul id="flavor">
	 	 	 	 	Ice cream Flavors:
	 	 	 	 	<li> Cookie dough</li>
	 	 	 	 	<li> Pistachio</li>
	 	 	 	 	<li> Cookies & Cream</li>
	 	 	 	 	<li> Cotton Candy</li>
	 	 	 	 	<li> Lemon & Raspberry Sorbet</li>
	 	 	 </ul>
	 	</form>
</body>
</html>

下面是文本开头包含特殊字符的另一个示例：


<html>
<head>
<style>
	 	p::first-letter {
	 	 	 color: blue;
	 	 	 font-size: 2.5em;
	 	}
</style>
</head>
<body>
	 	<p>-Hyphen</p>
	 	<p>_Underscore</p>
	 	<p>"Quotation marks</p>
	 	<p>#Hash</p>
</body>
</html>

打印本页