Маркеры и цифры в списке другого цвета

CSS
  • ❓ Why do we need CSS feature detection at all?
  • 🛠️ What are good (and not so good) ways to do feature detection?
  • 🤖 What does the future hold for CSS feature detection?
  1. ❓ Why do we need CSS feature detection at all?
  2. 🛠️ What are good (and not so good) ways to do feature detection?
  3. 🤖 What does the future hold for CSS feature detection?
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item
  6. Sixth item
  7. Seventh item
  8. Eighth item
  9. Ninth item
  10. Tenth item
<style>
/*1*/
#ul ul {
    list-style: none
}

#ul li::before {
    content: "•";
    color: red;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}



/*2*/
#ol ol {
    list-style: none;
    counter-reset: li
}

#ol li::before {
    content: counter(li);
    color: red;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

#ol li {
    counter-increment: li
}


/*3*/
div.example {
    border: #603 dotted;
    padding: 0.5em;
    margin: 1em 0;
}

.example ol {
    list-style: none;
    counter-reset: li;
}

.example ol li {
    counter-increment: li;
}

.example ol li::before {
    content: counter(li);
    color: red;
    display: inline-block;
    width: 1em;
    margin-left: -1.5em;
    margin-right: 0.5em;
    text-align: right;
    direction: rtl;
}
</style>

<div id="ul">
    <ul>
        <li>❓ Why do we need CSS feature detection at all?</li>
        <li>🛠️ What are good (and not so good) ways to do feature detection?</li>
        <li>🤖 What does the future hold for CSS feature detection?</li>
    </ul>
</div>
<div id="ol">
    <ol>
        <li>❓ Why do we need CSS feature detection at all?</li>
        <li>🛠️ What are good (and not so good) ways to do feature detection?</li>
        <li>🤖 What does the future hold for CSS feature detection?</li>
    </ol>
</div>
<div class="example">
    <ol class="better">
        <li>First item
        </li>
        <li>Second item
        </li>
        <li>Third item
        </li>
        <li>Fourth item
        </li>
        <li>Fifth item
        </li>
        <li>Sixth item
        </li>
        <li>Seventh item
        </li>
        <li>Eighth item
        </li>
        <li>Ninth item
        </li>
        <li>Tenth item
        </li>
    </ol>
</div>
  1. ❓ Why do we need CSS feature detection at all?
  2. 🛠️ What are good (and not so good) ways to do feature detection?
  3. 🤖 What does the future hold for CSS feature detection?
<style>
.article-content ol,
.article-content ul {
    margin: 0 0 1.5rem 1.5rem
}

.article-content ol,
.article-content ul {
    margin-left: 1rem
}

.article-content ol li,
.article-content ul li {
    text-indent: -1.1rem
}

.article-content ol li>*,
.article-content ul li>* {
    margin: .5rem 0
}

.article-content ol ul,
.article-content ul,
.article-content ul ul {
    list-style: none
}

.article-content ol ul li:before,
.article-content ul li:before,
.article-content ul ul li:before {
    content: "•";
    margin: 0 .5rem 0 0;
    color: #ff8a00
}

.article-content ol,
.article-content ol ol,
.article-content ul ol {
    list-style: none;
    counter-reset: my-awesome-counter
}

.article-content ol>li,
.article-content ol ol>li,
.article-content ul ol>li {
    counter-increment: my-awesome-counter
}

.article-content ol>li:before,
.article-content ol ol>li:before,
.article-content ul ol>li:before {
    font-family: Ringside Regular A, Ringside Regular B, Rubik, Lato, Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif;
    font-style: normal;
    content: counter(my-awesome-counter) ".";
    color: #ff8a00;
    font-weight: 700;
    margin: 0 .5rem 0 0
}

.article-content ol ol,
.article-content ol ul,
.article-content ul ol,
.article-content ul ul {
    margin: 5px 0 0 1rem
}
</style>

<div class="article-content">
    <ol>
        <li>❓ Why do we need CSS feature detection at all?</li>
        <li>🛠️ What are good (and not so good) ways to do feature detection?</li>
        <li>🤖 What does the future hold for CSS feature detection?</li>
    </ol>
</div>

Источник

  1. ❓ Why do we need CSS feature detection at all?
  2. 🛠️ What are good (and not so good) ways to do feature detection?
  3. 🤖 What does the future hold for CSS feature detection?

CSS:

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;
}
body {
  font-family: Montserrat, sans-serif;
}

HTML:

<ol>
  <li>Lorem, ipsum dolor.</li>
  <li>Alias, repellendus praesentium.</li>
  <li>Asperiores, voluptatem perspiciatis.</li>
  <li>Animi, placeat laudantium.</li>
</ol>

Different colored numbers than text on ordered list <ol>

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

    HTML:

    <ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
<ol>

    CSS:

    /* Tell the <li> to not display numbers, but keep track of what the numbers should be */
ol li {
  counter-increment: list;
  list-style-type: none;
  position: relative;
}
/* Outout the numbers using the counter() function, but use a custom color, and position the numbers how we want */
ol li:before {
  color: #e75204;
  content: counter(list) ".";
  left:-32px;
  position: absolute;
  text-align: right;
  width: 26px;
}

    Источник

    Ещё вариант:

    <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
  <style>
   ol {
    list-style-type: none; /* Убираем исходные маркеры */
    counter-reset: num; /* Задаём имя счетчика */
   }
   li::before {
    content: counter(num) '. '; /* Выводим число */
    counter-increment: num; /* Увеличиваем значение счётчика */
    color: red;
    font-style: italic;
   }
  </style>
 </head>
 <body>
  <ol>
   <li>Первый</li>
   <li>Второй</li>
   <li>Третий</li>
   <li>Четвертый</li>
  </ol>
 </body>
</html>

    Articoli correlati