Чтобы сделать маленький прицел в 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.
