Декоративные заголовки

::before и ::after отлично подходят для добавления украшений. Взгляните на этот заголовок с декоративными линиями.

See the Pen Decorative Lines Heading by Will Boyd (@lonekorean) on CodePen.

HTML содержит всего лишь единственный тег <h1>.

HTML

<h1>Elegant Heading</h1>

Двойные линии по обеим сторонам полностью выполнены с помощью CSS.

CSS

h1 {
  display: grid;
  grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
  align-items: center;
  text-align: center;
  gap: 40px;
}
h1::before, h1::after {
  content: '';
  border-top: 6px double;
}

Здесь псевдоэлементы вставляются до и после текста заголовка. Их content установлен как '', потому что на самом деле нам не нужно никакого содержимого, мы просто хотим, чтобы элементы были на месте, чтобы мы могли применить к ним двойные границы для создания линий.

Самое время упомянуть, что свойство content обязательно для создания псевдоэлемента, но, как видите, его вполне можно установить пустым ('').

Нужный нам макет получается путём превращения элемента <h1> в три колонки. Левая и правая колонки представляют собой двойные линии, обе шириной minmax(50px, 1fr), это означает, что они всегда будут иметь ширину не менее 50px. Текст заголовка аккуратно выравнивается по центру в средней колонке.

Декоративная лента

Хорошо, давайте рассмотрим эту концепцию подробнее. Вот заголовок с декоративной лентой.

See the Pen Decorative Ribbon Heading by Will Boyd (@lonekorean) on CodePen.

И снова в HTML нам нужен всего лишь один тег <h1>.

<h1>Ribbon Heading</h1>

Дальше всё делает CSS.

h1 {
  position: relative;
  margin: 0 auto 20px;
  padding: 10px 40px;
  text-align: center;
  background-color: #875e46;
}

h1::before, h1::after {
  content: '';
  width: 80px;
  height: 100%;
  background-color: #724b34;

  /* Позиционируем концы ленты позади и чуть ниже */
  position: absolute;
  z-index: -1;
  top: 20px; 

  /* Форма концов ленты */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

  /* Рисуем и позиционируем согнутую часть ленты */
  background-image: linear-gradient(45deg, transparent 50%, #5d3922 50%);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: bottom right;
}

h1::before {
  left: -60px;
}

h1::after {
  right: -60px;
  transform: scaleX(-1); /* Переворачиваем по горизонтали */
}

На этот раз мы используем абсолютное позиционирование для размещения псевдоэлементов. Левый конец ленты создаётся с помощью ::before, а правый — с помощью ::after. CSS рисует их вместе с общими стилями, направленными в одну сторону, а затем переворачивает h1::after с помощью transform: scaleX(-1).

Форма концов ленты получается через clip-path. Согнутые части ленты — это маленькие треугольники, нарисованные с помощью background-image и linear-gradient() и аккуратно расположенные в нижних внутренних углах.