Как сделать оформление списков ul li для информационных блоков | How to design ul li lists for information blocks

Красивое оформление списков для любой информации, с использованием всего одного класса. В этой заметке представлено несколько решений, которые помогут избавиться от стандартного вида списков <ul> <li>.

Преимущество данного оформления в том, что используется всего один класс: <ul class="CLASS">. Такая конструкция сильно упрощает работу со списками в шаблонах и текстах.

ДЛЯ ПОДКЛЮЧЕНИЯ FONTAWESOME:

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/fontawesome.min.css" rel="stylesheet" type="text/css" />

ПРИМЕР №1:

• Элемент списка
• Элемент списка
• Элемент списка
• Элемент списка
• Элемент списка

HTML КОД ПРИМЕР №1:

<ul class="list6a">
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>   
</ul>

CSS КОД ПРИМЕР №1:

.list6a {
    padding:0;
    list-style: none;
}
.list6a li{
    padding:6px;
}
.list6a li:before {
    padding-right:10px;
    font-weight: bold;
    color: #77AEDB;
    content: "\2606";
    transition-duration: 0.5s;
}
.list6a li:hover:before {
    color: #337AB7;
    content: "\2605";
}

ПРИМЕР №2:

• Элемент списка
• Элемент списка
• Элемент списка
• Элемент списка
• Элемент списка

HTML КОД ПРИМЕР №2:

<ul class="list6b">
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>
    <li>Элемент списка</li>  
</ul>

CSS КОД ПРИМЕР №2:

.list6b {
    padding:0;
    list-style: none;
}
.list6b li{
    padding:6px;
}
.list6b li:before {
    padding-right:10px;
    font-weight: bold;
    color: #C0C0C0;
    content: "\2714";
    transition-duration: 0.5s;
}
.list6b li:hover:before {
    color: #337AB7;
    content: "\2714";
}