将锚的文本置于其绝对定位的伪元素之上答案

【问题标题】：Placing anchor's text above its absolutely positioned pseudo element将锚的文本置于其绝对定位的伪元素之上
【发布时间】：2015-07-15 00:47:14
【问题描述】：

是否可以转这个：

喜欢这个吗？

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

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

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>

【问题讨论】：

标签： css z-index pseudo-element

【解决方案1】：

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

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

【讨论】：