suffix
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.
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 class="choices">
<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 リストとカウンターモジュール