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

Question

[Кристина]

Мне нужно сделать так:


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

Но понимаю, что задав ширину в пикселях в разных браузерах может съехать.
Как лучше всего сделать, чтобы было кроссбраузерно и не коряво?

Comments

[Кристина]

Всем большое спасибо за ответы!
Для себя взяла решение Абдулы.

Answer 1

[Abdula Magomedov]

display: inline-flex;

Answer 2

[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);
}

Answer 3

[Артём Лучников]

попробуйте такие стили

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;
}