Коротко: добавить линию в CSS можно разными способами: горизонтальный разделитель — тег <hr> или border-bottom; декоративную линию под заголовком — псевдоэлемент ::after; вертикальную линию — border-left или узкий блок с фоном; градиентную «растяжку» — linear-gradient. Выбор зависит от назначения линии.
Что за линия
| Вид | Способ |
|---|---|
| Горизонтальный разделитель | <hr> или border-bottom |
| Короткая линия под заголовком | ::after |
| Вертикальная линия | border-left |
| Градиентная линия | background: linear-gradient() |
Вкладки: примеры
hr {
border: 0;
border-top: 1px solid #e5e5e5;
margin: 32px 0;
}У hr есть собственный стиль по умолчанию — его обнуляют и задают свой. Так получается аккуратный горизонтальный разделитель между секциями.
.title::after {
content: "";
display: block;
width: 64px;
height: 3px;
background: #003F8F;
border-radius: 2px;
margin-top: 12px;
}Классический приём для заголовков. Линия живёт в псевдоэлементе — разметка чистая, а линия не мешает тексту переноситься.
.quote {
border-left: 4px solid #003F8F;
padding-left: 16px;
}Вертикальная линия слева — для цитат, списков и «акцентных» блоков. Работает как часть рамки: не нужно отдельного элемента.
.divider {
height: 2px;
background: linear-gradient(90deg, transparent, #003F8F, transparent);
}Линия, «растворяющаяся» по краям. Делают на пустом блоке или на псевдоэлементе. Хорошо смотрится между секциями.
::after/::before — HTML остаётся семантичным, а стиль управляемым.Практика: три задачи
- Разделитель секций — стилизованный
hr. - Линия под заголовком —
::afterс шириной и отступом. - Цитата —
border-leftи боковой padding.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Линия на всю ширину вместо короткой | использован hr |
::after с шириной |
::after не виден |
нет content |
content: "" |
| Линия «прижата» к тексту | нет отступа | margin-top |
| Вертикальная линия ниже текста | высота блока | использовать align-items: stretch |
Проверьте себя
Вопросы и ответы
border-top: 1px dashed #ccc; — стиль dashed или dotted.
border-left у второй колонки или пустой блок шириной 1–2px с фоном, растянутый по высоте.
Да: плавно менять width или transform: scaleX() при наведении — популярный эффект у ссылок и заголовков.
Часто да. hr семантичен как «тематический переход», но для чисто декоративной линии достаточно рамки или псевдоэлемента.
Итоги
- Разделитель —
hrилиborder-bottom. - Линия-украшение —
::afterсcontentи шириной. - Вертикальная —
border-leftи padding. - Градиентная —
linear-gradientна пустом блоке.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.