Атрибут class тега <hr>
Описание
Атрибут class позволяет задавать один или несколько классов для тега <hr>, что дает возможность стилизовать горизонтальную линию через CSS и взаимодействовать с ней через JavaScript.
<hr class="divider fancy-line">
<hr class="dotted-separator">
Особенности работы:
| Характеристика | Описание | Пример |
|---|---|---|
| Множественные классы | Можно указать несколько классов через пробел | class="divider bold" |
| Регистрозависимость | Классы чувствительны к регистру | Divider ≠ divider |
| Специфичность | Влияет на приоритет в CSS | .divider { } |
Примеры стилизации через CSS:
<style>
.divider {
border: none;
height: 2px;
background: linear-gradient(90deg, #3498db, #e74c3c);
margin: 2rem 0;
}
.dotted-separator {
border: none;
border-top: 3px dotted #7f8c8d;
height: 0;
margin: 20px 0;
}
.fancy-line {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
<hr class="divider fancy-line">
<hr class="dotted-separator">
Рекомендации по именованию:
- Используйте осмысленные имена (не line1, line2)
- Придерживайтесь единого стиля (BEM, kebab-case)
- Для модификаторов используйте префиксы (--modifier)
- Избегайте избыточных классов
- Разделяйте логику и оформление
Пример с BEM-нотацией:
<style>
.separator {
border: none;
margin: 2rem 0;
}
.separator--red {
border-top: 2px solid #e74c3c;
}
.separator--blue {
border-top: 2px solid #3498db;
}
</style>
<hr class="separator separator--red">
<hr class="separator separator--blue">
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Не влияет на семантику тега
<hr> - Стилизация может отличаться в разных браузерах
- Для сложных разделителей лучше использовать
<div>
Примечание: Хотя тег <hr> имеет семантическое значение (тематический раздел), с помощью классов вы можете полностью изменить его визуальное представление. Однако для чисто декоративных разделителей иногда лучше использовать <div> с соответствующими классами.