試一試
p::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: brown;
}
<p>
Scientists exploring the depths of Monterey Bay unexpectedly encountered a
rare and unique species of dragonfish. This species is the rarest of its
species.
</p>
<p>
When Robison and a team of researchers discovered this fish, they were aboard
a week-long expedition.
</p>
識別元素的首字母並非總是那麼簡單
允許的屬性
只有一小部分 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 <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;
}
結果
規範
| 規範 |
|---|
| CSS 偽元素模組 Level 4 # first-letter-pseudo |
瀏覽器相容性
載入中…