css 如何不换行+使用伪类居中绝对位置标题：before

nfzehxib 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(185)

我有以下H2元素"základní操作"
我使用伪类::before创建下划线。

h2 {
  position: absolute;
  font-size: 3rem;
  text-align: center;
  font-size: var(--fs-xl);
  transform: translateX(-50%);
  left: 50%;
}

h2:before {
  content: "";
  position: absolute;
  width: 80%;
  height: 1px;
  bottom: 0px;
  left: 10%;
  border-bottom: 3px solid #007bff;
}

<h2>
  Zakladni operace
</h2>

一切1词标题看起来很棒，但对于2和更多的词标题像"základní操作"它的 Package 。有没有理由在这种情况下，我有很多的空间，你可以看到下面的图片.
在这种情况下，我如何将其居中？我需要为伪类保留绝对位置。如果没有伪类::before，我将只简单地设置text-align center

css

来源：https://stackoverflow.com/questions/75121870/how-to-center-absolute-position-heading-without-wrapping-using-pseudo-class-b

1条答案

按热度按时间

wlzqhblo1#

将width: 100%;添加到h2中。当我刚刚测试你的代码片段时，它工作正常。或者，如果你特别想防止换行符，你也可以添加white-space: nowrap;。

h2 {
  position: absolute;
  font-size: 3rem;
  text-align: center;
  font-size: var(--fs-xl);
  transform: translateX(-50%);
  left: 50%;
  width: 100%;
}

h2:before {
  content: "";
  position: absolute;
  width: 80%;
  height: 1px;
  bottom: 0px;
  left: 10%;
  border-bottom: 3px solid #007bff;
}

<h2>
  Zakladni operace
</h2>

赞(0）回复(0）举报 2023-01-18

我来回答

css 如何不换行+使用伪类居中绝对位置标题：before

1条答案

相关问题

热门标签

最新问答