Как создать масштабируемый фон для текста, который находится в div, используя css

Question

Я хочу создать div, как показано ниже.

И html равно

<div class="col-lg-3 col-md-3 col-sm-3">
  <div style="background-color: rgb(236, 236, 236); border-radius: 100px; width: 80%; height:80%; padding: 50px">
    <h2 style="width: 100%; height: 100%" />Text</h2>
  </div>
</div>

Это прекрасно работает при 100% просмотре страницы, но если я увеличиваю или уменьшаю масштаб страницы, фон формы «текст» div's меняется. Можете ли вы помочь мне исправить это. В основном я хочу масштабируемый фон для div.

Answer 1

Использовать псевдоэлемент ...

body {
  text-align: center;
}

:root {
  --val: 200%;
}

h2 {
  display: inline-block;
  margin-top: 50px; /* adjust as required - or align some other way*/
  position: relative;
}

h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--val);
  padding-bottom: var(--val);
  transform: translate(-50%, -50%);
  background: lightgrey;
  z-index: -1;
  border-radius: 50%;
}

<h2>Text</h2>