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