html - div 之前伪显示之后的 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