CODEWITHSUNDEEP
htmlcss
user9150212
user9150212

Reputation:

How to do css style for ordered list numbers?

I try to change the style of the Ordered list numbers using CSS, but I got some wrong outcomes.

<ol>
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
</ol>

CSS

ol li {
  counter-increment: step-counter;
  margin-bottom: 10px;
  list-style-type: none;
}

ol li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 15px;
}

The above code displays 2 List numbers (One Default and the other is my defined style). The output is like

    1. This is my first item
    1. This is my second item

So, why it occurs double times. Please help to get that as single time (the second one is my defined style)

Upvotes: 3

Views: 4251

Answers (2)

user2625911
user2625911

Reputation: 87

One simple solution for styling <li> numbers: put a <span> around the entire content within each <li>, then style the <span> differently than the <li> itself.

HTML:

<ol>
<li><span>List item</span></li>
<li><span>List item</span></li>
<li><span>List item</span></li>
</ol>

CSS:

li {
  color: red;
  font-weight: bold;
}

li span {
  color: black;
  font-weight: normal;
}

Upvotes: 0

zer00ne
zer00ne

Reputation: 44108

custom-counter is an invalid selector and even if it was valid, it would be pointing to nothing. Just remove that whole ruleset and then add list-style-type: none; to the <ol> as in:

ol {list-style-type: none;}

Assign position:relative to all <li> and position:absolute to each li::before in order to have granular control over all bullet distances from text.

li {
  position: relative;
...
}

li::before {
...
  position: absolute;
  top: -1px;
  /* Adjust < -number | number+ > */
  left: -32px;
...


:root {
  font: 400 16px/1.25 Verdana
}

ol {
  list-style-type: none;
}

ol li {
  counter-increment: step-counter;
  position: relative;
  margin: 10px 0 0 0;
}

ol li::before {
  content: counter(step-counter);
  display: block;
  position: absolute;
  top: -1px;
  /* Adjust < -number | number+ > */
  left: -32px;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  background-color: rgb(0, 200, 200);
  color: white;
  font-weight: bold;
  font-size: 0.8rem;
  text-align: center;
  border-radius: 15px;
}
<ol>
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
</ol>

Upvotes: 6

Related Questions