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.

@counter-style ルールの prefix 記述子は、カウンターのマーカー表現の先頭に追加されるコンテンツを指定します。

カウンター値が負の場合、prefix は負の符号の前に、 negative 記述子によって追加されたその他の <symbol> の前に付きます。

構文

css

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

値

prefix 記述子は、その値として単一の <symbol> を取ります。

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

公式定義

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

形式文法

prefix = 
  <symbol>  

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

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

例

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

この例では、それぞれのカウンタ番号の前に "Book " （空白付き）が接頭辞として付加され、その後にコロン (:) が続きます。コロンは、suffix 記述子によって追加されます。

HTML

html

<ol class="books">
  <li>Flamer, by Mike Curato</li>
  <li>Gender Queer: A Memoir, by Maia Kobabe</li>
  <li>Tricks, by Ellen Hopkins</li>
  <li>The Handmaid's Tale: The Graphic Novel, by Margaret Atwood</li>
  <li>Crank, by Ellen Hopkins</li>
</ol>

CSS

css

@counter-style books {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "書籍 ";
  suffix: ": ";
}

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

結果

仕様書

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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年8月7日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content