Question

在下面的代码中，我想在div之后添加一行。我曾经使用过：但是这行在div之前。请帮帮我。

＆＃13;

div {
  background-color: red;
  width: 300px;
  height: 300px;
}

div:after {
  content: "";
  background-color: blue;
  height: 2px;
  width: 120px;
  margin: 24px auto 0;
  display: block;
}

＆＃13;

<div></div>

＆＃13;

Answer 1

您可以使用位置

进行设置

div {
  background-color: red;
  width: 300px;
  height: 300px;
  position: relative;
}

div:after { 
    content: "";
    background-color: blue;
    height: 2px;
    width: 120px;
    margin: 24px auto 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

<div></div>

Answer 2

伪元素的名称::after可能有点误导。它不会在选择器定位的元素之后，但在之内，之后所有其他内容。

所以你的代码等同于：

＆＃13;

#div1 {
  background-color: red;
  width: 300px;
  height: 300px;
}

#div2 {
  background-color: blue;
  height: 2px;
  width: 120px;
  margin: 24px auto 0;
  display: block;
}

＆＃13;

<div id="div1">
  <div id="div2"></div>
</div>

＆＃13;

（因为您的div没有内容，无论您使用::before还是::after）都无关紧要。

所以你要么必须使用定位来在div之后（视觉上）移动蓝线，或者你可以将::after应用于div的父元素，这可能是也可能不要做你想做的事：

＆＃13;

#inner {
  background-color: red;
  width: 300px;
  height: 300px;
}

#outer:after {
  content: "";
  background-color: blue;
  height: 2px;
  width: 120px;
  margin: 24px auto 0;
  display: block;
}

＆＃13;

<div id="outer">
  <div id="inner"></div>
</div>

＆＃13;

Answer 3

您可以使用以下代码设置行

<style type="text/css">
    div {
      background-color: red;
      width: 300px;
      height: 300px;
      position: relative;

    }
    div::after {
      content: " ";
      background-color: blue;
      display: block;
      position: absolute;
      height: 2px;
      width: 120px;
      left: 100%;
    }

    </style>
    <div></div>

Answer 4

您可以使margin-top选择器的after属性等于您所需的div高度，并添加float:left;

div {
  background-color: red;
  width: 300px;
  height: 300px;
   float:left;
}

div:after {
  content: '';
  background-color: blue;
  height: 2px;
  width: 120px;
  margin: 300px auto 0;
  display: block;
   
}

<div></div>

：没有按预期工作

4 个答案: