CSS 前 pseudo-element 的响应式变换

Question

我在这里的效果是在 h1 header 的 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>

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

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>

CSS 前 pseudo-element 的响应式变换

Responsive CSS transform for before pseudo-element

css

transform

rotation

pseudo-element