::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 偽元素一起使用：

所有字體屬性：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;
}

結果

規範

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

瀏覽器相容性

BCD tables only load in the browser

參見

::first-line