Создание горизонтальной линии с текстом в CSS: примеры

Быстрый ответ

Чтобы максимально быстро создать горизонтальную линию с центрированным текстом, воспользуйтесь CSS псевдоэлементами ::before и ::after следующим образом:

.line-with-text::before,
.line-with-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid black; /* Эффектно рисуем линию */
  margin: 0 10px; /* Задаём отступ для отделения текста */
}
.line-with-text {
  display: flex;
  align-items: center;
  text-align: center; /* Выравниваем текст по центру */
}

Для внедрения стилизации в разметку HTML, используйте следующую структуру:

<h2 class="line-with-text"><span>Мистер CenteredText из страны CSS</span></h2>

Данный подход в достаточной мере удовлетворяет критериям скорости реализации, адаптивности и настраиваемости.

Внедряем элементы визуальной привлекательности

Добавьте некоторую визуальную изюминку вашему тексту, сохранив идеальное положение текста относительно линии с помощью корректного line-height и padding для гармоничного расположения элементов:

h2 {
  border-bottom: 1px solid #000; /* Рисуем чёткую линию */
  line-height: 0.8em; /* Приближаем текст к линии */
  text-align: center; /* Выравниваем текст по центру */
}
h2 span {
  background-color: #FFF; /* Ставим чистый белый фон */
  padding: 0 10px; /* Свободное пространство вокруг текста */
  position: relative; /* Фиксируем положение текста */
}

Данный подход к стилизации эффективен и универсален во всех современных браузерах.

Придаём динамизм стилю с линией и текстом

Гибкая расстановка с помощью Flexbox

С помощью flexbox вы можете легко управлять выравниванием и отступами контента:

.h2-flex::before,
.h2-flex::after {
  content: '';
  border-bottom: 1px solid #000; /* Рисуем тонкое подчёркивание */
  margin: 0 1em; /* Добавляем пространство между элементами */
  flex: 1; /* Заботимся о балансе и симметрии */
}
.h2-flex {
  display: flex;
}

Подробнее об этом расскажет наш спикер на видео

Выделение текста рамками

Подчеркните ваш текст рамкой, чтобы сделать его более заметным:

.highlight-text {
  padding: 0 10px; /* Увеличиваем расстояние между текстом и рамкой */
  border: 1px solid; /* Рисуем чёткий контур вокруг текста */
}

Создание разрыва линии для разнообразия

Иногда, создание разрыва в линии может сделать ваш дизайн более интересным:

.break-line::after {
  content: '';
  display: block;
  height: 1px;
  background: black;
  width: 100%; /* Занимаем полностью всё пространство */
  margin-top: 15px; /* Добавляем пространство сверху для свободы мыслей */
}

Визуализация

Представьте себе железнодорожные рельсы (🛤️) с информационной табличкой станции (🚏) в центре:

🛤️=🚏=🛤️

Рельсы олицетворяют горизонтальную линию, продолжающуюся слева направо.

Табличка станции (🚏) это текст, уютно расположившийся посередине, придающий изюминку ровной линии.

Переносим эти визуальные образы на наш код:

Рельсы 🛤️ = CSS граница || Табличка Станции 🚏 = Текст

Совмещая элементы гармонично, мы придаём дизайну визуальную привлекательность:

Рельсы 🛤️ --граница-- ---- 🚏 (текст) ---- --граница-- 🛤️ Рельсы

Тонкие настройки: Цвета и адаптивность

Адаптация размера для разных устройств

Обеспечьте адаптацию вашего дизайна под различные размеры экранов с использованием адаптивных элементов:

@media (max-width: 600px) {
  .line-with-text::before,
  .line-with-text::after {
    width: 30%; /* Уменьшаем пространство с грацией */
  }
}

Кастомизация цветов линий и текста

Чтобы изменить цветовую гамму, можно произвести следующие настройки:

.line-with-text::before,
.line-with-text::after {
  border-color: #3498db; /* Придает морской оттенок дизайну */
}
h2 span {
  color: #ecf0f1; /* Спокойный оттенок для текста */
}

Эффект зачёркнутого текста

Для создания визуального эффекта "перечеркивания" текста используйте line-through:

.strike-text::after {
  text-decoration: line-through; /* Перечёркиваем текст, пока код еще горяч */
}

Полезные материалы

1. Заголовки с линиями по бокам | CSS-Tricks — Изучите другие подходы к созданию заголовков с горизонтальными линиями.
2. ::before – CSS: Cascading Style Sheets | MDN — Официальная документация про псевдоэлемент ::before. Очень познавательно!
3. ::after – CSS: Cascading Style Sheets | MDN — Официальная документация про псевдоэлемент ::after. Необходимо к прочтению!
4. c++ – Оператор присваивания по умолчанию во вложенном классе с ссылочными членами – Stack Overflow — Немного не в тему, но освежить знания по C++ всегда полезно!
5. Галерея CSS декора – Web Designer Wall — Найдите вдохновение в интересных примерах CSS декоративных элементов. Границ нет!