Как сделать такой элемент?

Для создания определенного элемента в CSS, вам нужно сначала определить его тип и свойства, а затем применить соответствующий код CSS. В данном случае, так как вы не уточнили, о каком элементе идет речь, я предположу, что вы имеете в виду создание кастомного элемента.

Создание кастомного элемента в CSS осуществляется с помощью использования псевдоэлемента ::before или ::after и свойств content, чтобы добавить нужный контент к элементу. Например, если мы хотим создать элемент с изображением и текстом внутри, мы можем использовать следующий код:

.custom-element {
  position: relative;
  display: inline-block;
  padding: 10px;
  border: 1px solid #000;
}

.custom-element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-image: url("path/to/image.jpg");
}

.custom-element span {
  padding-left: 60px; /* Увеличьте значение, если изображение большое */
}

В приведенном коде мы создаем контейнер .custom-element, задаем ему необходимые свойства, такие как отступы (padding) и рамку (border). Затем мы используем псевдоэлемент ::before, чтобы добавить изображение. Мы задаем ему позиционирование (position: absolute;), размеры (width и height) и background-image, указывающий путь к изображению. Внутри контейнера располагается текстовый элемент <span>, для которого мы задаем отступ слева (padding-left), чтобы сделать место под изображение.

Конечно, это пример и конкретный дизайн вашего элемента может отличаться. Однако, основная идея заключается в использовании псевдоэлементов и свойства content, чтобы добавить нужные элементы в ваш стиль. Необходимо также помнить, что существуют различные возможности и подходы к созданию кастомных элементов с использованием CSS, и вы можете адаптировать решение под свои потребности и требования дизайна.