伪元素之前的响应式 CSS 转换答案

【问题标题】：Responsive CSS transform for before pseudo-element伪元素之前的响应式 CSS 转换
【发布时间】：2018-01-11 12:57:38
【问题描述】：

我在这里追求的效果是在之前的伪元素中显示单词“Introducing”，用于具有自己的内容居中的 h1 标头。到目前为止，我的努力如下所示

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 伪保留其相对于其父级的位置。但是，我怀疑这不是正确的解决方案。希望这里有人可以提出更好的方法。

【问题讨论】：

也许更好的地方是codereview.stackexchange.com？

标签： css rotation transform pseudo-element

【解决方案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>

【讨论】：