在div之前显示pusedo之后的CSS

Question

我试图用css做简单的箭头，当我使用after时，该元素显示在div之前。 为什么会这样呢？

div {
  width: 400px;
  height: 40px;
  background: #000;
  margin-top: 3em;
}
div:after {
  content: '';
  display:inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #7B98B5;
}

    <div></div>

http://plnkr.co/edit/SkUY5ygufCdXXpRdSQl5?p=preview

Answer 1

我将确保包括：

div {
    ...
    position: relative;
}
div:after {
    ....
    position: absolute;
    left: 100%;
}

更新了您的Plunker（以前从未听说过该站点）： http ://plnkr.co/edit/7oXVgqEBLBuoYLDsRlEM?p=preview

Answer 2

您仍然需要正确放置元素。 我会做这样的事情：

div {
  width: 400px;
  height: 40px;
  background: #000;
  margin-top: 3em;
  position: relative; /* Added */
}
div:after {
  content: '';
  position: absolute; /* Added */
  right: -40px; /* Added */
  top: 0; /* Added */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #7B98B5;
}

Answer 3

您可以使用float: right伪元素的float: right :after ：

 div { width: 400px; height: 40px; background: #000; margin-top: 3em; } div:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 40px; border-color: transparent transparent transparent #7B98B5; float: right; } 

 <div></div> 

Answer 4

伪元素成为所应用元素的子元素。 因此，将其设置为:after ，不会将其放在元素本身之后，而是放在元素的内容之后……实际上是在做。

由于您没有内容，因此它似乎位于div的左侧，但不是...

 div { width: 400px; height: 40px; background: #000; margin-top: 3em; color:white; } div:after { content: ''; display:inline-block; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 40px; border-color: transparent transparent transparent #7B98B5; } 

 <div>my div content</div>