Как выравнять блок after относительно div'a?

Question

[Ayk72]

Здравствуйте!

Есть код:

<a href="#" class="tooltip links" data-title="Подсказка">link</a>
<style>
.links {
position: relative;
color: #000;
}
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover {
color: #c00;
text-decoration: none;
}

.tooltip:hover:after {
    background: #333;
    opacity: 0.8;
    border-radius: 3px;
    top: 27px;
    height: 18px;
    color: #fff;
    content: attr(data-titled);
    display: block;
    font-size:11px;
    white-space: nowrap;
    z-index: 98;
left: 0;
    text-align:center;
    position: absolute;
        overflow: hidden;
}
</style>

Вопрос: как выравнять их так, чтобы ссылка была посередине подсказки, а не слева?

Answer 1

[Сергей delphinpro]

left: 50%;
transform: translateX(-50%)