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>

这是可行的，据我所知，是响应 - 之前的伪保留其相对于其父级的位置。但是，我怀疑这不是正确的解决方案。希望这里有人能提出更好的建议。

Answer 1

您当前的解决方案是针对不同的屏幕尺寸做出响应的，但它并不是关于不同的h1长度。较长的文字需要不同的位置。

你可以解决它，使h1的宽度适应其内容。现在，只需将伪定位在左上角，将其置于平移中并旋转它。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

前伪元素的响应式CSS变换

1 个答案: