将锚文本放在其绝对定位的伪元素上方

Question

是否可以将其转为：

进入这个？

IE中。将锚文本放在其绝对定位的箭头伪元素上方。

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

http://jsfiddle.net/pgvx1h04/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

也许你可以像之前和之后一样伪造它：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;