Tooltip example with pseudo-classes

A tooltip example created with pseudo -classes :after and :before

by Roger Ramos

HTML

<div class="logo">
    MY TEXT
</div>

CSS

/* some reset */
body {
    padding: 50px
}

/* logo setup... */
.logo {
    font: normal 20px Arial, sans-serif;
    color: #9f9f9f;
    display: inline-block;
    padding: 3px 10px;
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
    position: relative;
}

/* ...and some magic goes here */
.logo:after,
.logo:before{
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 100%;
    left: 40%;
    border: solid 8px rgba(0, 0, 0, 0);
 }
.logo:after {
    border-bottom: solid 6px #fff;
}
.logo:before {
    border-bottom: solid 7px #000;
}