Question

我试图用css做简单的箭头，当我使用之后，元素显示在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用于伪元素:after：

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

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>

在div之前伪显示后的Css

4 个答案: