::marker
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
::marker 㯠CSS ã®æ¬ä¼¼è¦ç´ ã§ããªã¹ãé
ç®ã®ç®æ¡æ¸ãè¨å·ããã¯ã¹ï¼ãµã¤ãã¯é»ä¸¸ãçªå·ãå
¥ã£ããã®ï¼ã鏿ãã¾ãããã㯠display: list-item ãè¨å®ãããè¦ç´ ãæ¬ä¼¼è¦ç´ ãä¾ãã° <li> è¦ç´ ã <summary> è¦ç´ ã§å©ç¨ã§ãã¾ãã
試ãã¦ã¿ã¾ããã
li::marker {
content: "â ";
font-size: 1.2em;
}
<p>Group known as Mercury Seven:</p>
<ul>
<li>Malcolm Scott Carpenter</li>
<li>Leroy Gordon (Gordo) Cooper Jr.</li>
<li>John Herschel Glenn Jr.</li>
<li>Virgil Ivan (Gus) Grissom</li>
<li>Walter Marty (Wally) Schirra Jr.</li>
<li>Alan Bartlett Shepard Jr.</li>
<li>Donald Kent (Deke) Slayton</li>
</ul>
å©ç¨ã§ããããããã£
::marker æ¬ä¼¼è¦ç´ ã¯ãéãããæ°ã® CSS ããããã£ã®ã¿ã«å¯¾å¿ãã¦ãã¾ããä¾ãã°ä»¥ä¸ã®ãããªãã®ãããã¾ãã
- ãã¹ã¦ã®ãã©ã³ãããããã£
white-spaceããããã£colortext-combine-upright,unicode-bidi,directionã®åããããã£contentããããã£- ãã¹ã¦ã®ã¢ãã¡ã¼ã·ã§ã³ããã³ãã©ã³ã¸ã·ã§ã³ããããã£
ã¡ã¢: 仿§æ¸ã§ã¯ãå°æ¥çã«ãããªã CSS ããããã£ã«å¯¾å¿ããå¯è½æ§ãããã¨ãã¦ãã¾ãã
æ§æ
css
::marker {
/* ... */
}
ä¾
>HTML
html
<ul>
<li>Peaches</li>
<li>Apples</li>
<li>Plums</li>
</ul>
CSS
css
ul li::marker {
color: red;
font-size: 1.5em;
}
çµæ
仿§æ¸
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 > # marker-pseudo > |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
- æ¢å®ã§ç®æ¡æ¸ãè¨å·ããã¯ã¹ããã HTML è¦ç´ :
<ol>,<li>,<summary> - CSS çæã³ã³ãã³ãã¢ã¸ã¥ã¼ã«
- CSS ãªã¹ãã¨ã«ã¦ã³ã¿ã¼ã¢ã¸ã¥ã¼ã«
- CSS ã«ã¦ã³ã¿ã¼ã¹ã¿ã¤ã«ã¢ã¸ã¥ã¼ã«