时间戳

首页 > 解决方案 > 伪元素后的 HTML 未按预期显示

html - 伪元素后的 HTML 未按预期显示

问题描述

* {
    font-size: 14px;
    box-sizing: border-box;
}

.wrapper {
    padding: 2rem;
}

.text--bigtitle {
    text-transform: uppercase;
    font-size: 2rem;
}

.border--short {
    position: relative;
}

.border--short::after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 40%;
    bottom: 0;
    left: 50%;
    color: red;
    margin-left: -20%;
}
<div class="wrapper">
    <p class="border--short text--bigtitle">Short Border</p>
</div>

我想在使用 CSS 和 HTML 的标题下实现短的底部边框而不是全宽的底部边框。

我尝试使用 position:absolute 将 after 元素定位在标题文本下，并具有所需的宽度。但是，底部边框根本没有显示。我的代码如下所示：

谁能帮我解决这个问题，谢谢大家。

标签： htmlcsspositionpseudo-element

解决方案

试试这个，一旦它会起作用，如果你不想要文本中心删除text-align: center表单类.wrapper。

* {
  font-size: 14px;
  box-sizing: border-box;
}

.wrapper {
  padding: 2rem;
  text-align: center;
}

.text--bigtitle {
  text-transform: uppercase;
  font-size: 2rem;
  position: relative;
  display: inline-block;
}

.text--bigtitle::after {
  content: "";
  display: block;
  height: 2px;
  width: 40%;
  background-color: red;
  margin: auto;
}
<div class="wrapper">
  <p class="text--bigtitle">Short Border</p>
</div>

谢谢你...

推荐阅读