suffix
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2023å¹´9æ.
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 ãªã¹ãã¨ã«ã¦ã³ã¿ã¼ã¢ã¸ã¥ã¼ã«