Before After CSS: инструкции и примеры

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

Синтаксис для создания псевдоэлемента before и after выглядит следующим образом:

selector::before {
  content: 'text';
  /* Other properties */
}
selector::after {
  content: 'text';
  /* Other properties */
}

Свойство content определяет текст или контент, который будет добавлен в элемент. Также можно использовать специальные символы или изображения вместо текста.

Здесь приведен пример, как использовать before и after для добавления стрелки перед и после текста в кнопке:

HTML код:

Перейти

CSS стили:

.arrow-button {
  position: relative;
  background-color: #4285f4;
  color: #fff;
  text-transform: uppercase;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
.arrow-button span::before {
  content: "\2190";
  position: absolute;
  left: -20px;
}
.arrow-button span::after {
  content: "\2192";
  position: absolute;
  right: -20px;
}

В этом примере before и after используются внутри элемента span, который добавлен для создания дополнительного контейнера для контента before и after. Элемент span установлен как `position: relative`, чтобы before и after могли быть установлены внутри него с помощью абсолютной позиции.

С помощью свойства content, определяется, какой контент должен быть добавлен как before и after для элемента.

Затем, мы используем свойства `position`, `left` и `right` для установки позиции before и after относительно элемента span.

Данный пример является лишь одним из многих способов использования before и after псевдоэлементов в CSS. Они могут быть использованы для создания выделенных заголовков, полноэкранных фоновых изображений и других интересных эффектов.