Heading with arrow

Example of styling a header with an arrow using :after

HTML

<h1>Heading with an arrow</h1>

<p class="author">
    Created by <a href="http://www.parkji.co.uk" title="Parkji.co.uk">parkji</a>
</p>

CSS

h1 {
    background: #000000;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    position: relative;
}
h1:before {
    border-color: #000000 transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    content: " ";
    position: absolute;
    bottom: -20px;
    left: 10px;
}

.author {
    font-size: 14px;
    margin: 40px 0 0;
}