https://i.imgur.com/tJ5itHO.gif Каждый уважающий себя разработчик сайтов хочет чтобы его проект выглядел лучше других. Поэтому предлагаем для создания красивых сайтов рассмотреть несколько примеров оформления списков ol на CSS с применением счетчика counter и псевдоэлемтов :before и :after.

HTML кода для нумерованного списка:

Код:
<ol>
    <li>Текстовый блок №1</li>
    <li>Второй текстовый блок</li>
    <li>Текстовый блок №4</li>
    <li>Четвертый текстовый блок</li>
</ol>

Цвет нумерации для OL LI
Для задания цвета нужно переопределить нумерацию через псевдоэлемт ol li:before

Рабочий пример цвета нумерации для OL:
[html]<ol>
    <li>Текстовый блок №1</li>
    <li>Второй текстовый блок</li>
    <li>Текстовый блок №4</li>
    <li>Четвертый текстовый блок</li>
</ol>

<style> ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 35px;
    padding: 15px 0 5px 0;
    font-size: 18px;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
}
ol li:before {
    content: counter(num) '.';
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: -26px;
    width: 20px;   
    color: #00bff3;
    text-align: right;
} </style>
[/html]

CSS:

Код:
ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 35px;
    padding: 15px 0 5px 0;
    font-size: 18px;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
}
ol li:before {
    content: counter(num) '.';
    counter-increment: num;
    display: inline-block; 
    position: absolute;
    top: 0px;
    left: -26px;
    width: 20px;   
    color: #00bff3;
    text-align: right;
}

Большие цифры для OL LI
Для задания размера font-size для ol необходимо переопределить нумерацию через псевдоэлемт ol li:before

Рабочий пример больших цифр для OL
[html]<ol>
    <li>Текстовый блок №1</li>
    <li>Второй текстовый блок</li>
    <li>Текстовый блок №4</li>
    <li>Четвертый текстовый блок</li>
</ol>
<style> ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 60px;
    padding: 15px 0 5px 0;
    font-size: 16px;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
}
ol li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: -60px;
    width: 50px;   
    color: #00bff3;
    text-align: center;
    font-size: 42px;
    font-weight: bold;
} </style>
[/html]
CSS:

Код:
ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 60px;
    padding: 15px 0 5px 0;
    font-size: 16px;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
}
ol li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: -60px;
    width: 50px;   
    color: #00bff3;
    text-align: center;
    font-size: 42px;
    font-weight: bold;
}

Квадратные нумерованные маркеры для OL LI
Для задания квадратных маркеров мы переопределяем стандартную нумерацию через псевдоэлемт ol li:before

Рабочий пример цвета нумерации для OL
[html]<ol>
    <li>Текстовый блок №1</li>
    <li>Второй текстовый блок</li>
    <li>Текстовый блок №4</li>
    <li>Четвертый текстовый блок</li>
</ol>
<style> ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 45px;
    padding: 15px 0 5px 0;
    font-size: 16px;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    line-height: 1.4;
}
ol li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -38px;
    width: 28px;
    height: 28px;
    background: #00bff3;
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
} </style> [/html]
CSS:

Код:
ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 45px;
    padding: 15px 0 5px 0;
    font-size: 16px;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    line-height: 1.4;
}
ol li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -38px;
    width: 28px;
    height: 28px;
    background: #00bff3;
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
}

Круглые маркеры для OL LI
Для вывода круглых маркеров в CSS нужно переопределить нумерацию через псевдоэлемт ol li:before

Рабочий пример цвета нумерации для OL
[html]<ol>
    <li>Текстовый блок №1</li>
    <li>Второй текстовый блок</li>
    <li>Текстовый блок №4</li>
    <li>Четвертый текстовый блок</li>
</ol>
<style> ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 45px;
    padding: 15px 0 5px 0;
    font-size: 16px;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    line-height: 1.4;
}
ol li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -38px;
    width: 28px;
    height: 28px;
    background: #fff;
    color: #000;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
    border-radius: 50%;
    border: 1px solid #00bff3;
} </style> [/html]
CSS:

Код:
ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 45px;
    padding: 15px 0 5px 0;
    font-size: 16px;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    line-height: 1.4;
}
ol li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -38px;
    width: 28px;
    height: 28px;
    background: #fff;
    color: #000;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
    border-radius: 50%;
    border: 1px solid #00bff3;
}

Отбивающая вертикальная линия для OL LI
Для задания разграничительной линии нужно переопределить нумерацию через псевдоэлемт ol li:before и указать абсолютом линию через ol:before

Рабочий пример цвета нумерации для OL
[html]<ol>
    <li>Текстовый блок №1</li>
    <li>Второй текстовый блок</li>
    <li>Текстовый блок №4</li>
    <li>Четвертый текстовый блок</li>
</ol>
<style> ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 60px;
    padding: 15px 0 5px 0;
    font-size: 16px;
    position: relative;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    line-height: 1.4;
}
ol li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -55px;
    width: 28px;
    height: 28px;
    background: #fff;
    color: #000;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
    border-radius: 50%;
    border: 1px solid #00bff3;
}
/* Вертикальная линия */
ol:before {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: -15px;
    width: 1px;
    border-left: 1px solid #00bff3;
} </style> [/html]
CSS:

Код:
ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 60px;
    padding: 15px 0 5px 0;
    font-size: 16px;
    position: relative;
}
ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    line-height: 1.4;
}
ol li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -55px;
    width: 28px;
    height: 28px;
    background: #fff;
    color: #000;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
    border-radius: 50%;
    border: 1px solid #00bff3;
}
/* Вертикальная линия */
ol:before {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: -15px;
    width: 1px;
    border-left: 1px solid #00bff3;
}

[think=http://www.kolobok.us/smiles/standart/yahoo.gif] 🎅 Надеюсь вам помогла данная статья[/think]

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему