prefix

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

prefix@counter-style ルールの記述子で、マーカーに先立って表示される内容を指定します。指定されていない場合、既定値は "" (空文字列) になります。

構文

css
/* <symbol> 値 */
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);

<symbol>

マーカーに先立って表示される <symbol> を指定します。 <string>, <image>, <custom-ident> の何れかです。

公式定義

関連するアット規則@counter-style
初期値"" (空文字列)
計算値指定通り

形式文法

<symbol>

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>

カウンターに接頭辞を追加

HTML

html
<ul class="index">
  <li>The Boy Who Lived</li>
  <li>The Vanishing Glass</li>
  <li>The Letters from No One</li>
  <li>The Keeper of the Keys</li>
  <li>Diagon Alley</li>
</ul>

CSS

css
@counter-style chapters {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Chapter ";
}

.index {
  list-style: chapters;
  padding-left: 15ch;
}

結果

仕様書

Specification
CSS Counter Styles Level 3
# counter-style-prefix

ブラウザーの互換性

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
prefix

Legend

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

Full support
Full support

関連情報