CODEWITHSUNDEEP
htmlcss
jjrabbit
jjrabbit

Reputation: 363

How To Keep LI Numbers Inside OL

When the font size of the LI numbers increases the numbers leave the OL container (in pink).

Is there a way to increase the number size but keep everything inside of the pink area?

Here is an example:

ol {
  background: pink;
}

li {
  font-size: 50px;
}

span {
  font-size: 30px;
}
<ol>
  <li>
    <span>car</span>
  </li>
  <li>
    <span>plane</span>
  </li>
  <li>
    <span>boat</span>
  </li>
</ol>

Upvotes: 2

Views: 1486

Answers (3)

Ahmed Mansour
Ahmed Mansour

Reputation: 83

Run this code

 ol {
      background: pink;
      list-style-position: inside;
    }
    <ol>
      <li>
        <span>car</span>
      </li>
      <li>
        <span>plane</span>
      </li>
      <li>
        <span>boat</span>
      </li>
    </ol>

Upvotes: 0

MilkyTech
MilkyTech

Reputation: 1927

ol {
  background: pink;
  list-style-position: inside;
}

Upvotes: 4

folo
folo

Reputation: 524

if youre going to just use a fixed font-size of 50px you could simply add a padding to the OL element:

ol {
  padding-left: 70px;
  background: pink;
}

however, if youre going to use something cooler, you could do something like this:

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
  font-weight: bold;
}

Upvotes: 1

Related Questions