diff options
| -rw-r--r-- | files/ja/web/css/@counter-style/suffix/index.md | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/files/ja/web/css/@counter-style/suffix/index.md b/files/ja/web/css/@counter-style/suffix/index.md new file mode 100644 index 0000000000..22aaffb7c8 --- /dev/null +++ b/files/ja/web/css/@counter-style/suffix/index.md @@ -0,0 +1,83 @@ +--- +title: suffix +slug: Web/CSS/@counter-style/suffix +tags: + - '@counter-style' + - アットルール記述子 + - CSS + - CSS カウンタースタイル + - CSS 記述子 + - リファレンス +browser-compat: css.at-rules.counter-style.suffix +--- +{{CSSRef}} + +**`suffix`** は {{cssxref("@counter-style")}} ルールの記述子で、マーカーの表現に追加されるものを指定します。 + +## 構文 + +```css +/* <symbol> values */ +suffix: ""; +suffix: ") "; +suffix: url(bullet.png); +``` + +### 値 + +- `<symbol>` + - : マーカー表現に追加される記号を指定します。 {{cssxref("<string>")}}, {{cssxref("<image>")}}, {{cssxref("<custom-ident>")}} が指定できます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### カウンターの接尾辞を設定 + +#### HTML + +```html +<ul class="choices"> + <li>One</li> + <li>Two</li> + <li>Three</li> + <li>None of the above</li> +</ul> +``` + +#### CSS + +```css +@counter-style options { + system: fixed; + symbols: A B C D; + suffix: ") "; +} + +.choices { + list-style: options; +} +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_a_suffix_for_a_counter')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}} +- {{cssxref("symbols()")}}, 無名のカウンタースタイルを生成する関数記法 |