Как использовать псевдоэлементы CSS After Before для ваших дизайнов

CSS after и before - это псевдоэлементы, которые позволяют добавлять дополнительные элементы на страницу. Они могут использоваться для украшения или изменения стиля элементов.

Пример кода для после элемента:

.element::after {
  content: " ";
  display: block;
  width: 10px;
  height: 10px;
  background-color: red;
}

Это создаст красный квадратный блок после элемента с классом "element". Код начинается с написания селектора ".element::after", который указывает на создание псевдоэлемента "after" для элемента с классом "element". Затем мы используем свойство "content", чтобы задать символ или строку, которая будет отображаться внутри элемента. В данном случае мы использовали пустую строку, чтобы создать пустой элемент. Затем мы задаем свойства "display", "width" и "height", чтобы задать размер элемента и определить его тип отображения. В данном случае мы использовали "display: block", чтобы создать блочный элемент. Наконец, мы задаем цвет фона элемента с помощью свойства "background-color".

Пример кода для before элемента:

.element::before {
  content: "Hello, world!";
  color: blue;
  font-size: 24px;
  font-weight: bold;
}

Это создаст текст "Hello, world!" перед элементом с классом "element". Затем мы задаем свойства "color", "font-size" и "font-weight", чтобы задать цвет, размер и жирность текста.