Как сделать такую обертку?

Question

[Manvel]

Думал через :after и :before сделать но не приходит в голову как

Comments

[imdeveloper]

фон сделать

Answer 1

[Mizutsune]

Например можно сделать так:



В примере выше - "позиция" каждого псевдоэлемента зависит от его размера.

Конечно можно изменить значение переменной для смещения элемента:

- --pseudo-offset: calc((0px - (var(--pseudo-size) / 2)) - 1px);
+ --pseudo-offset: calc(0px - (var(--pseudo-size) / 2));

Разница заключается в том, что в этом варианте нет дополнительного пикселя, который как бы слегка нормализует позиционирование.

Ну или вообще можно задавать смещение для псевдоэлементов вручную:

- --pseudo-offset: calc((0px - (var(--pseudo-size) / 2)) - 1px);
+ --pseudo-offset: -8px;

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

Comments

[Manvel]

Спасибо большое!!!