Я работаю над проектом Bootstrap 5 с использованием SCSS и создал собственные утилиты для стилизации списков. Мне нужны отзывы о лучших практиках и потенциальных улучшениях моего подхода.
Текущие проблемы
Рядом с цветным отображается дополнительный белый значок. Мне нужно удалить этот лишний значок.
Текущая реализация
SCSS
// Custom list styles with FontAwesome icons
.no-bullets, .list, .square-list {
li {
list-style: none;
a {
text-decoration: none;
padding-left: .5rem;
}
}
& .square-list li::before {
content: '\f0c8';
font-family: FontAwesome;
display: inline-block;
margin-left: calc(var(--icon-space) * -1);
}
& .solid li::marker {
font-weight: 900;
}
}
// Dynamic color classes from Bootstrap theme colors
@each $color, $value in $theme-colors {
.marker-#{$color} {
li::before {
color: #{$value};
}
}
.li-#{$color}::before {
color: #{$value};
}
}
Вот HTML:
-
Content 1
$VALUE -
Content 2
$VALUE -
Content 3
$VALUE -
Content 4
$VALUE
Подробнее здесь: https://stackoverflow.com/questions/798 ... in-my-list
