Placing anchor's text above its absolutely positioned pseudo element

Question

Is it possible to turn this:

into this?

Ie. placing the anchor's text above its absolutely positioned arrow pseudo element.

The only solution I can think of is wrapping the anchor text in a span and then absolutely positioning that again over everything. But is there a way to do this without modifying the markup?

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

Maybe you can fake it with before and after like this:

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