HTML 在 Pseudo-element 之后未按预期显示

Question

* {
    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 在标题下实现短底边框而不是 full-width 底边框。

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

谁能帮我解决这个问题，谢谢heaps

Answer 1

将 color 属性更改为 .border--short::after 的 background-color 属性。 color 属性用于改变文字的字体颜色。 background-color 用于改变背景颜色。谢谢

* {
  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%;
  background-color: red;
  margin-left: -20%;
}

<div class="wrapper">
  <p class="border--short text--bigtitle">Short Border</p>
</div>

Answer 2

希望这就是您所需要的..

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

.wrapper {
    padding: 2rem;
}

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

.border--short {
    position: relative;
    padding-bottom: 10px;
}

.border--short::after {
        content: "";
    display: block;
    height: 2px;
    width: 40%;
    background-color: red;
}

<div class="wrapper">
    <p class="border--short text--bigtitle">Short Border</p>
</div>

Answer 3

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

.wrapper {
    padding: 2rem;
}

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

.border--short {
    position: relative;
    display: inline-block;
}

.border--short::after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 40%;
    bottom: 0px;
    left: 30%; /* 50 % minus half the width */
    background-color: red;
}

<div class="wrapper">
    <p class="border--short text--bigtitle">Short Border</p>
</div>

Answer 4

试一试，如果你不想文本中心删除 text-align: center 表单 class .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>

谢谢...

HTML 在 Pseudo-element 之后未按预期显示

HTML after Pseudo-element not showing as intended

html

css

position

pseudo-element