Как лучше всего реализовать фон у заголовка?

Мне нужно сделать так:
59eb7b24b2078855409400.png

Я сделала так:
https://codepen.io/KrisIris/pen/dVLGrj

Но понимаю, что задав ширину в пикселях в разных браузерах может съехать.
Как лучше всего сделать, чтобы было кроссбраузерно и не коряво?
  • Вопрос задан
  • 133 просмотра
Решения вопроса 3
Stalker_RED
@Stalker_RED
h1 {
  display: inline; /* чтобы заголовок не тянулся на всю ширину */
  font-size: 52px;
  position: relative;
}

h1::after {
  content: '';
  position: absolute;
  top: 30%; /* отступы */
  bottom: 30%;
  left: 0;
  right: 0;
  z-index: -1;
  background: rgba(251,218,3,0.8);
}
Ответ написан
попробуйте такие стили

h1 {
  display: inline-block;
  position: relative;
  font-size: 52px;
  margin-bottom: 40px;
  margin-top: 10px;
  padding: 5px;
}

h1:after {
  content: '';
  display: block;
  background: rgba(251,218,3,0.8);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -9px;
  height: 18px;
  width: 100%;
  z-index: -1;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы