CODEWITHSUNDEEP
css
Anna_B
Anna_B

Reputation: 900

CSS: "line-height" combined with "list-style" does not work like expected in Firefox

Firefox ignores the line-height setting in this case:

ul {
  list-style-position: inside;
  list-style-type: "– ";
  line-height: 30%; /* Firefox ignores that */
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

How is it possible to fix that? There also should be in Firefox these 30 percent.

If one list item gets longer than one line, there still should be this typical indent at the beginning.

Upvotes: 1

Views: 207

Answers (1)

Temani Afif
Temani Afif

Reputation: 273777

Do it different using pseudo element. It seems to work fine on Firefox:

ul {
  list-style:none;
  line-height: 30%; 
}

ul li::before {
  content:"– ";
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Upvotes: 1

Related Questions