Стилизуем разрывы текста в CSS

Если у вас есть текст с оформлением, который переносится на несколько строк. То с помощью box-decoration-break можно контролировать, как оформление будет отображаться при переносе.

Разберем на примере:

<div class="container">
  <h1><span class="clone">Привет, мир!</span></h1>
  <h1><span>Привет, мир!</span></h1>
</div>

Здесь у нас 2 текста, которые переносятся на новую строку (max-width: 200px).

CSS:

span {
  background: linear-gradient(to right, #4f46e5, #ec4899);
  color: white;
  padding: 12px;
}

.clone {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Зададим одинаковое оформление, но первому тексту добавим box-decoration-break: clone и посмотрим разницу:
■ по умолчанию box-decoration-break: slice — оформление ведёт себя как единое целое, паддинги только по бокам всего блока, фон/градиент продолжается между строками.
■ box-decoration-break: clone — каждая строка становится независимым блоком, паддинги со всех сторон у каждой строки, фон/градиент применяется к каждой строке отдельно.

Важно помнить, это работает только с inline-элементами.

Такой вот короткий лайфхак, если не знали об этом свойстве раньше)

Пример здесь.

Бургер-меню без JS

Давайте разберем, как сделать адаптивное меню для сайта, используя только HTML и CSS.

Нам нужно:
■ Скрытый checkbox для хранения состояния.
■ Label, как переключатель (кнопка бургера).
■ Меню изначально скрыто через opacity: 0.
■ При клике на label — чекбокс переключается и показывает меню.

HTML:

<input type="checkbox" id="menu-toggle">
<div class="menu">
  <nav>
    <a href="#">Главная</a>
    <a href="#">О нас</a>
  </nav>
</div>
<label for="menu-toggle" class="menu-btn">
  <span></span>
  <span></span>
  <span></span>
</label>

CSS:

#menu-toggle {
  display: none;
}
.menu {
  opacity: 0;
  visibility: hidden;
}
#menu-toggle:checked ~ .menu {
  opacity: 1;
  visibility: visible;
}

Как работает:
■ Checkbox скрыт — display: none, но состояние сохраняется.
■ Label связан с input через for="menu-toggle".
■ Клик на label = клик на checkbox — браузер автоматически переключает состояние.
■ Селектор ~ — находит элементы .menu после чекбокса.
■ :checked — псевдокласс активен только при отмеченном checkbox.
■ Результат — меню появляется/исчезает при каждом клике.

Такая вот нехитрая, но рабочая схема)

Код, как всегда, здесь.