Why don't the numbers "1" and "2" appear underlined?

Question

Does anyone know how can I make the numbers 1 or 2 have the same style as the rest of the heading.

This is the code:

ol {
  background-color: pink;
}

ol li {
  color: green;
  text-decoration: underline;
}

<ol>
  <li>
    <h1>Films préférés</h1>
    <ul>
      <li>Citizen Kane</li>
      <li>Rois et Reines </li>
      <li>Vendredi 13</li>
    </ul>
  </li>
  <li>
    <h1>Livre préférés</h1>
    <ul>
      <li>Le rouge et le noir</li>
      <li>Le choix de Sophie</li>
      <li>La chute</li>
    </ul>
  </li>
</ol>

Well they **are green**, but they aren't actually *text*...they are styling. You'd have to replace them - https://stackoverflow.com/questions/488830/ol-with-numbers-another-color — Paulie_D, Jun 10 '19 at 15:29
or - https://stackoverflow.com/questions/33947762/how-to-style-markers-in-an-ordered-list-that-uses-start-attribute?noredirect=1&lq=1 — Paulie_D, Jun 10 '19 at 15:31
You should start looking at li;before styling like in the other suggestions — Toxide82, Jun 10 '19 at 15:33

yaya · Accepted Answer · 2019-06-10T16:00:53.737

You can see it here: codepen

Short answer: That's the normal behavior. List-style numbers don't inherit their styles from list headings. they have their own styles and you can't select and style them directly. you can just remove list-style (by list-style:none) and create your own list-style numbers with css, and apply styles to them. (Described in long answer)

Long answer:

apply display: inline; to your headings:

ol > li > h1{
  display: inline;
}

add custom stylable list style numbers:

ol {
  list-style: none;
  counter-reset: counter;
}

ol > li {
  counter-increment: counter;
}
ol > li::before {
  content: counter(counter) ". ";
  display: inline;
}

apply same style as h1 default style to the list style : (you can see h1 deafult styles here : html default styles)

ol > li::before {
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Full style:

ol {
  list-style: none;
  counter-reset: counter;
}

ol > li {
  counter-increment: counter;
}

ol > li > h1{
  display: inline;
}

ol > li::before {
  content: counter(counter) ". ";
  display: inline;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Why don't the numbers "1" and "2" appear underlined?

1 Answers1