CODEWITHSUNDEEP
css
simon
simon

Reputation: 631

what for it's working additive-symbols at CSS3?

I am see this documentation at : https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/additive-symbols

but I don't understand true, what for it's working

down is code example :

HTML5

<ul class="list">
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ul>

CSS3

@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: I 1;
}
.list {
  list-style: additive-symbols-example;
}

Upvotes: 0

Views: 121

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42354

The CSS isn't a replacement for the HTML; it's supplementary (you need both).

Including the relevant HTML with your CSS shows that it does indeed work as intended:

@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: I 1;
}

.list {
  list-style: additive-symbols-example;
}
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

However, note that at the moment, additive symbols are only supported in Firefox (from Firefox 33 and onwards). In Firefox, this produces:

Symbols

In all other browsers you will only see the regular bullet points rendered.

Hope this helps! :)

Upvotes: 1

Related Questions