Как то можно задать правильные отступы для такого псевдо-элемента?

Question

[lagudal]

Проблемка - на маленьких разрешениях вот этот текст частично перекрывается:



Хотел было просто задать padding-left и padding-right, но работает только левый padding.
Что еще можно сделать?

Comments

[Ankhena]

Идеально было бы заменить кнопки на мобилках и вид и положение.
Т.е. ту скорее сначала задача для дизайнера или дизайнерской ипостаси верстальщика.

[lagudal]

дизайнерская находка вот такая - тут собственно ничего сложного нет, я просто не понял почему если псевдоэлементу - before или after - задать padding-left, то padding-right не работает.
Хотя нет, не совсем так - откуда ноги растут я понимаю, дело не в псевдоэлементах а в слайдере, т.е. в положении картинок, в их сдвигах. А так этот правый паддинг задается, то не сдвигается, остается на своем месте.
Пока решил проблему костылем - разделил полупрозрачный фон и заголовок, фон на before, текст на after, и тексту max-width: 80% и padding-left: 10%; - места теперь хватает и текст строго посередине )

Answer 1

[Ilya Olovyannikov]

.text {
  padding: 0 calc(var(--ширина-кнопки) / 2);
}