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;
}


共有 お気に入り 通報
Nekomusume

2 件の回答

Nekomusume

在我阅读了关于vertical-align这个CSS属性的建议后。

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


2024-08-23 11:21:28に投稿されました
通報
Ricciflows

我不是CSS方面的专家，但如果你将vertical-align: middle; 放到你的 .pdf:before 指令里会怎么样?

2024-08-23 11:24:09に投稿されました
通報