如何使用css为div中的文本创建可缩放背景

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>