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> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
カウンターの接尾辞を設定
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 |
ブラウザーの互換性
Loading…
関連情報
@counter-style記述子:system,symbols,additive-symbols,negative,prefix,range,pad,speak-as,fallback- リストスタイルのプロパティ:
list-style,list-style-image,list-style-position symbols(), 無名のカウンタースタイルを生成する関数記法。- CSS カウンタースタイルモジュール
- CSS リストとカウンターモジュール