::first-letter

::first-letter CSS 伪元素将样式应用于块级容器的第一行的第一个字母，但仅当它前面没有其他内容（例如图像或内联表格）时。

试一试

元素的第一个字母并不总是容易识别的

在匹配中包含在第一个字母之前或之后紧跟的标点符号。标点符号包括在打开（Ps）、关闭（Pe）、初始引号（Pi）、最终引号（Pf）和其他标点符号（Po）类中定义的任何 Unicode 字符。
某些语言的连字总是大写在一起，例如荷兰语中的IJ。在这些情况下，连字的两个字母都应由::first-letter伪元素匹配。
::before伪元素和content属性的组合可以在元素的开头插入一些文本。在这种情况下，::first-letter将匹配此生成内容的第一个字母。

注意：CSS 引入了::first-letter表示法（带两个冒号）以区分伪类和伪元素。为了向后兼容，浏览器也接受较早引入的:first-letter。

浏览器对荷兰语等语言中IJ等连字的支持较差。请查看下面的兼容性表格以查看当前的支持状态。

允许的属性

只有少部分 CSS 属性可以与::first-letter伪元素一起使用

所有字体属性：font、font-style、font-feature-settings、font-kerning、font-language-override、font-stretch、font-synthesis、font-variant、font-variant-alternates、font-variant-caps、font-variant-east-asian、font-variant-ligatures、font-variant-numeric、font-variant-position、font-weight、font-size、font-size-adjust、line-height 和 font-family
所有背景属性：background、background-color、background-image、background-clip、background-origin、background-position、background-repeat、background-size、background-attachment 和 background-blend-mode
所有边距属性：margin、margin-top、margin-right、margin-bottom、margin-left
所有填充属性：padding、padding-top、padding-right、padding-bottom、padding-left
所有边框属性：简写形式 border、border-style、border-color、border-width、border-radius、border-image，以及完整形式的属性
color 属性
text-decoration、text-shadow、text-transform、letter-spacing、word-spacing（在适当情况下）、line-height、text-decoration-color、text-decoration-line、text-decoration-style、box-shadow、float、vertical-align（仅当 float 为 none 时）CSS 属性

语法

css

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

示例

简单的首字下沉

在本例中，我们将使用 ::first-letter 伪元素在紧随 <h2> 之后的段落首字母上创建简单的首字下沉效果。

HTML

html

<h2>My heading</h2>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>

CSS

css

p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

结果

对特殊标点符号和非拉丁字符的影响

此示例说明了 ::first-letter 对特殊标点符号和非拉丁字符的影响。

HTML

html

<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>"特殊的汉字标点符号开头。</p>

CSS

css

p::first-letter {
  color: red;
  font-size: 150%;
}

结果

在 SVG 文本元素中设置首字母样式

在本例中，我们使用 ::first-letter 伪元素来设置 SVG <text> 元素的首字母样式。

注意：在撰写本文档时，此功能支持有限。

HTML

html

<svg viewBox="0 0 300 40">
  <text y="30">First letter in &lt;text&gt; SVG</text>
</svg>

CSS

css

text {
  font-family: sans-serif;
}

text::first-letter {
  font-family: serif;
  font-size: 2rem;
  font-weight: 600;
  fill: tomato;
  stroke: indigo;
}

结果

规范

规范
CSS 伪元素模块级别 4 # first-letter-pseudo

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

::first-line