CODEWITHSUNDEEP
htmlcss
D Singh
D Singh

Reputation: 1

ol start function not working with my css

I am trying to start a new list with continuing number. But when I use css to customise numbers then start function stop working. I am using to start a new list from 5.

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
    padding: 0 0 1em 0;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: #be1e2d;
  font-weight: bold;
  margin-left:-1em;
        
}
<div class="row">
  <div class="columns large-6">
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
    </div>
  <div class="columns large-6">
<ol start="5">
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ol>
    </div>
</div>

Upvotes: 0

Views: 3164

Answers (3)

Trillyy
Trillyy

Reputation: 365

This approach is similar to the answer from Aman Vaswani, you can use CSS vars instead to achieve the same result in a cleaner way

:root {
    --counter: 1;
}

ol {
    list-style: none;
    counter-reset: my-awesome-counter calc(var(--counter) - 1);
  }
  ol li {
    counter-increment: my-awesome-counter;
      padding: 0 0 1em 0;
  }
  ol li::before {
    content: counter(my-awesome-counter) ". ";
    color: #be1e2d;
    font-weight: bold;
    margin-left:-1em;
          
  }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="row">
    <div class="columns large-6">
  <ol style="--counter: 1;">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
  </ol>
      </div>
    <div class="columns large-6">
  <ol style="--counter: 5;">
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
  </ol>
      </div>
  </div>
</body>
</html>

Upvotes: 0

Aman Vaswani
Aman Vaswani

Reputation: 83

start="5" attribute will not work

<style>
    ol {
        list-style: none;
        
        counter-reset: my-awesome-counter;
    }

    ol li {
        counter-increment: my-awesome-counter;
        padding: 0 0 1em 0;
    }

    ol li::before {
        content: counter(my-awesome-counter) ". ";
        color: #be1e2d;
        font-weight: bold;
        margin-left: -1em;

    }
</style>



<div class="row">
    <div class="columns large-6">
        <ol >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
    <div class="columns large-6">
        <ol style="counter-reset: my-awesome-counter 4;">
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ol>
    </div>
</div>

Change your ol style to

<ol style="counter-reset: my-awesome-counter 4;">

This will solve your problem.

Upvotes: 0

StardustGogeta
StardustGogeta

Reputation: 3406

div.row {
  counter-reset: my-awesome-counter;
}
ol {
  list-style: none;
}
ol li {
  counter-increment: my-awesome-counter;
    padding: 0 0 1em 0;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: #be1e2d;
  font-weight: bold;
  margin-left:-1em;
        
}
<div class="row">
  <div class="columns large-6">
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
    </div>
  <div class="columns large-6">
<ol start="5">
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ol>
    </div>
</div>

Your CSS resets the counter with every <ol>. Changing that fixes the issue.

Upvotes: 1

Related Questions