从中心开始后的伪元素 - CSS

Question

以下是我的代码，我在其中尝试将红色底部应用于 div，这样它需要 50px 左右 margin 然后拉伸到最大宽度，但不知何故它正在向左移动。让我知道我怎样才能出现在 div 底部的中心，从左到右各有 50px space。

另外让我知道为什么 ::after 元素是从中心而不是从最左边创建的。 [参考其创作形象]。

HTML -

<div class="container">
  <h1>This is a simple heading</h1>
  <h3>This is only a test description</h3>
</div>

CSS -

.container {
  background: #34EACC;
  width: 100%;
  text-align: center;
}
.container:after {
  content: "";
  position: absolute;
  width: 100%;
  margin: 0 50px;
  height: 1px;
  background-color: red;
}

JSFIDDLE - https://jsfiddle.net/gwdvqs5j/

图像 -

Answer 1

只使用左右属性

.container {
  background: #34EACC;
  width: 100%;
  text-align: center;
}
.container:after {
  content: "";
  position: absolute;
  height: 1px;
  background-color: red;
  left: 50px;
  right: 50px;
}

<div class="container">
  <h1>This is a simple heading</h1>
  <h3>This is only a test description</h3>
</div>

Answer 2

在定义 absolute 时，如果想要 position 元素

，您还应该声明 left 或 right 属性

.container {
  background: #34EACC;
  width: 100%;
  text-align: center;
}

.container:after {
  content: "";
  position: absolute;
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 1px;
  background-color: red;
}

<div class="container">
  <h1>This is a simple heading</h1>
  <h3>This is only a test description</h3>
</div>

Answer 3

您可以使用翻译：transform(),

希望这对您有所帮助:)

.container {
  background: #34EACC;
  width: 100%;
  text-align: center;
}
.container:after {
  content: "";
  position: absolute;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background-color: red;
}

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>This is a simple heading</h1>
      <h3>This is only a test description</h3>
    </div>
  </body>
</html>

从中心开始后的伪元素 - CSS

Pseudo element in after starting from center - CSS

html

css

css-selectors

pseudo-element