::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.

* Some parts of this feature may have varying levels of support.

::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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::first-letter
Support for the Dutch digraph IJ
Support on SVG <text> element

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Uses a non-standard name.
Has more compatibility info.

参见