このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
suffix
Baseline 2023Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
suffix は@counter-style ルールの記述子で、マーカーの表現に追加されるものを指定します。
構文
css
/* <symbol> 値: 文字列、画像、識別子 */suffix: "";suffix: ") ";suffix: url(bullet.png);値
suffix 記述子は、その値として単一の<symbol> を取ります。
<symbol>マーカー表現に追加される
<symbol>を指定します。<string>,<image>,<custom-ident>が指定できます。
公式定義
| 関連するアット規則 | @counter-style |
|---|---|
| 初期値 | ". " (ピリオドの後に空白) |
| 計算値 | 指定通り |
形式文法
suffix =
<symbol>
<symbol> =
<string>|
<image>|
<custom-ident>
<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
例
カウンターの接尾辞を設定
HTML
html
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>該当なし</li></ul>CSS
css
@counter-style options { system: fixed; symbols: A B C D; suffix: ") ";}.choices { list-style: options;}結果
仕様書
| Specification |
|---|
| CSS Counter Styles Level 3 # counter-style-suffix |
ブラウザーの互換性
関連情報
@counter-style記述子:system,symbols,additive-symbols,negative,prefix,range,pad,speak-as,fallback- リストスタイルのプロパティ:
list-style,list-style-image,list-style-position symbols(), 無名のカウンタースタイルを生成する関数記法。- CSS カウンタースタイルモジュール
- CSS リストとカウンターモジュール