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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
list-style
,list-style-image
,list-style-position
symbols()
、無名のカウンタースタイルを作成する関数記法