css - 将 anchor 的文本放置在其绝对定位的伪元素之上

Question

有没有可能把这个:

进入这个？

即。将 anchor 的文本放在其绝对定位的箭头伪元素之上。

我能想到的唯一解决方案是将 anchor 文本包装在一个范围内，然后将其再次绝对定位在所有内容上。 但是有没有办法在不修改标记的情况下做到这一点？

http://jsfiddle.net/pgvx1h04/

.tryout {
  margin-top: 50px;
}

.container {
  position: absolute;
  background: #fff;
  border: 1px solid black;
}

.container a {
  padding: 3px 11px;
  position: relative;
}

.container a:before, .container a:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  transform: rotate(45deg);
  top: -8px;
  left: 18px;
}

.container a:before {
  background: black;
  z-index: -1;
}

.container a:after {
  background: white;
  z-index: 1;
  top: -7px;
}

<div class="tryout">
  <div class="container">
    <a>Hello world</a>
  </div>
</div>

Answer 1

也许你可以像这样用 before 和 after 来伪造它:

.tryout {
    margin-top: 50px;
}
.container {
    position: absolute;
    background: #fff;
    border: 1px solid black;
}
.container a {
    padding: 3px 11px;
    position: relative;
}
.container a:before {
    content:"";
    width: 0;
    height: 0;
    border: 10px solid;
    position: absolute;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #000;
    top: -19px;
    left: 18px;
    display: block;
}
.container a:after{
    content:"";
    width: 0;
    height: 0;
    border: 10px solid;
    position: absolute;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #fff;
    top: -17px;
    left: 18px;
    display: block;
}

<div class="tryout">
  <div class="container">
    <a>Hello world</a>
  </div>
</div>