Search code examples
csscss-content

Vertically aligning CSS :before and :after content

I am trying to centre the link with the image, but can't seem to move the content vertically in any way. 

<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

The icon is 22 x 22px

.pdf {
    font-size: 12px;
}
.pdf:before {
    padding:0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
}
.pdf:after {
    content: " ( .pdf )";
    font-size: 10px;
}
.pdf:hover:after {
    color: #000;
}
Solution

  • Answered my own question after reading your advice on the vertical-align CSS attribute. Thanks for the tip!

    .pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%;
}