Question

以下是我的代码，其中我尝试将红色底部应用于div，使得50px左右margin然后拉伸到最大宽度，但是它不知何故向左移动。让我知道如何从左侧和右侧留下50px的空间出现在div底部的中心。

另请告诉我为什么::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

在定义absolute时，如果想要left元素，您还应声明right或position属性

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

只需使用左右属性

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用translate：transform（），

希望这有助于：）

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: