::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.
尝试一下
元素的第一个字母并不总是容易识别:
允许的属性
只有一小部分 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>我的标题</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"><text> 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