::first-letter

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

::first-letter CSS 伪元素将样式应用于区块容器第一行的第一个字母,但仅当其前面没有其他内容(例如图像或行内表格)时才有效。

尝试一下

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

  • 第一个字母之前或紧随其后的标点符号也包含在匹配中。标点符号包括在 Unicode 中定义的开始括号(Ps)、结束括号(Pe)、起始引号(Pi)、结束引号(pf)和其他标点符号(po)类别的任何字符。
  • 有些语言的数字符总是一起大写,如荷兰语中的 IJ。在这种情况下,数字的两个字母都应与 ::first-letter 伪元素匹配。
  • ::before 伪元素和 content 属性的组合可能会在元素开头注入一些文本。在这种情况下,::first-letter 将匹配生成内容的第一个字母。

备注:CSS 引入了 ::first-letter 符号(带两个冒号),以区分伪类伪元素。为了向后兼容,浏览器也接受早先引入的 :first-letter

浏览器对荷兰语中 IJ 等数字字符的支持较差。请查看下面的兼容性表,以了解当前的支持情况。

允许的属性

语法

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

示例

简单的下沉式首字母

在此示例中,我们将使用 ::first-letter 伪元素在紧接 <h2> 后的段落的首字母上创建一个简单的下沉式首字母效果。

HTML

html
<h2>我的标题</h2>
<p>
  人的心只容得下一定程度的绝望,海绵已经吸够了水,即使大海从它上面流过,也不能再给它增添一滴水了。文学就像炉中的火一样,我们从人家借得火来,把自己点燃,而后传给别人,以致为大家所共同拥有。魂牵梦萦在江南,有一片土地,名唤故乡;对酒当歌在烟雨,有一份情愫,称作痴迷。
</p>
<p>世界上最宽阔的是海洋,比海洋更宽阔的是天空,比天空更宽阔的是人的心灵。</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>一些段落,一些段落,一些段落,一些段落。</p>
<p>-特殊标点符号的开头。</p>
<p>_特殊标点符号的开头。</p>
<p>"特殊标点符号的开头。</p>
<p>'特殊标点符号的开头。</p>
<p>*特殊标点符号的开头。</p>
<p>#特殊标点符号的开头。</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">&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;
}

结果

规范

Specification
CSS Pseudo-Elements Module Level 4
# first-letter-pseudo

浏览器兼容性

BCD tables only load in the browser

参见