Как отцентрировать текст внутри :after у которого прописана трансформация?

Question

[Сергей Васенин]

какие способы есть центрировать content в after
песочница

Comments

[one_day]

отцентрировать хз, в вашем примере можно padding: 0 8px;

Answer 1

[Kovalsky]

text-align: center не котируется?

Пришлось создать отдельный контейнер для этого текста.

Comments

[one_day]

нужно тогда и ширину задать

[Kovalsky]

one_day: т.к. размеры треугольника установлены жёстко, то и единственным способом центрировать псевдоэлемент является поворот его родителя на нужный угол и жёсткая установка внутренних отступов. То есть тогда получается, что повернут сам контейнер, а элементы в нём без трансформаций относительно контейнера.

Это нужно потому что во всех других случаях нету контекста для выравнивания, этим контейнером мы его создаём.

Проще банально отступ в два пикселя сделать)

[Сергей Васенин]

Никита Полевой: в каком плане жестко ? в пикселях ?

[Kovalsky]

Сергей Васенин: ну да, как у вас в примере с границами сделано, с треугольником.

[Сергей Васенин]

Никита Полевой: а можно как то по другому задать ?

[Kovalsky]

Сергей Васенин: чисто логически для того чтоб что-то центрировать, сначала нужно чтоб было в чем центрировать, относительно чего, какой-то контейнер, границы. Поэтому я и говорю о том, что нужно его создать.

Но вполне возможно что я ошибаюсь и вам сейчас подскажут вариант попроще.

[Сергей Васенин]

Никита Полевой: я так думаю проще поместить его в i либо span придать стили и повернуть на 45 градусов

[Kovalsky]

Сергей Васенин: как-то так. Не очень красиво, но в целом других вариантов лично я не вижу.

Ещё раз хочу заметить, что такой сложный подход нужен только для того чтобы реализовать именно центрирование, а просто чуть-чуть подвинуть элемент чтобы он был на своём месте можно было и простым отступом.

[Сергей Васенин]

Никита Полевой: =(( печально наверное проще просто подвинуть только думаю при изменении размера браузера будет вести себя некорректно