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在标题下实现短底边框而不是全宽底边框。

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

任何人都可以帮助我解决这个问题。

Answer 1

将color属性更改为background-color的{{1}}属性。 .border--short::after属性用于更改文本的字体颜色。 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%;
}

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表单类.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未按预期显示

4 个答案: