css - 伪元素之前的响应式 CSS 转换

Question

我在这里的效果是在 h1 标题的 before 伪元素中显示单词“Introducing”，它的内容居中。到目前为止，我的努力如下所示

h1::before
{
 font-size:0.7rem;
 content:'Introducing';
 position:absolute;
 left:calc(50% - 6em);
 top:-0.75em;
 transform:rotate(-45deg);   
  
}
h1
{
 text-align:center;
 position:relative;
 margin-top:30px;
}

<h1>
Hello
</h1>

这是有效的，据我所知，它是响应式的 - before 伪保留其相对于其父级的位置。但是，我怀疑这不是正确的解决方案。希望这里有人可以提出更好的方法。

Answer 1

您当前的解决方案可响应不同的屏幕尺寸，但与不同的 h1 长度无关。较长的文本需要不同的位置。

你可以解决它让 h1 的宽度调整到它的内容。现在，只需将伪定位在左上角，通过平移将其居中并旋转。

h1::before {
  font-size: 0.7rem;
  content: 'Introducing';
  position: absolute;
  top: -1em;
  transform: translateX(-50%) rotate(-45deg);
}

h1 {
  text-align: center;
  position: relative;
  margin: 30px auto;
  width: fit-content;
  background-color: cadetblue;
}

<h1>
  Hello
</h1>
<h1>
  Hello World
</h1>