Как сделать маленький прицел в css v34

Чтобы сделать маленький прицел в CSS V3, можно использовать псевдоэлементы ::before и ::after, которые позволяют создавать дополнительные элементы внутри выбранного элемента.

Вот пример:

HTML:

<div class="target"></div>

CSS:

.target {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: black;
}

.target::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 2px;
  height: 10px;
  background-color: white;
}

.target::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 2px;
  background-color: white;
}

В этом примере мы создаём блок с классом .target и применяем к нему необходимые стили. Затем мы используем псевдоэлементы ::before и ::after, чтобы создать вертикальную и горизонтальную линии прицела.

В первом псевдоэлементе ::before, мы добавляем вертикальную линию, устанавливаем позиционирование элемента как абсолютное, с помощью свойства position: absolute; и настраиваем его местоположение с помощью свойств top, left и transform. Затем мы задаём размеры и цвет линии.

Во втором псевдоэлементе ::after, мы делаем то же самое, но использовать горизонтальную линию.

Когда вы обновите страницу, вы должны увидеть черный квадрат с белым прицелом в середине. Вы можете настроить размеры, цвета и положение прицела изменением параметров CSS.