Vertically aligning CSS :before and :after content

Question

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

Consider using flex: http://stackoverflow.com/a/22218694/435605 - the answer is for text but works on all elements. — AlikElzin-kilaka, Nov 26 '15 at 17:20
Thanks to CSS3's [substring matching attribute selectors](https://www.w3.org/TR/css3-selectors/#attribute-substrings), you can now do `a[href$=".pdf"] { … }` and not even need the class. — Adam Katz, Sep 29 '17 at 21:51
This seems to be the best answer for vertically centering content of :before/:after pseudo-elements: https://stackoverflow.com/a/14524161/470749 — Ryan, Dec 04 '19 at 16:17

score 163 · Accepted Answer · edited Nov 05 '13 at 13:10

163

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

edited Nov 05 '13 at 13:10

Christoph Bach

598
4
9

answered May 14 '10 at 09:38

theorise

7,245
14
46
65

4

Nice. What worked for me was vertical-align:super; – DBUK Jul 03 '12 at 13:54
This vertical-align in % with negative values is awesome. Don't know before. – Natwar Singh Jun 07 '20 at 08:59

fassl · Answer 2 · 2016-07-03T23:36:09.557

32

You can also use tables to accomplish this, like:

.pdf {
  display: table;
}
.pdf:before {
  display: table-cell;
  vertical-align: middle;
}

Here is an example: https://jsfiddle.net/ar9fadd0/2/

EDIT: You can also use flex to accomplish this:

.pdf {
  display: flex;
}
.pdf:before {
  display: flex;
  align-items: center;
}

Here is an example: https://jsfiddle.net/ctqk0xq1/1/

edited Jul 03 '16 at 23:36

answered Jul 02 '16 at 19:42

fassl

724
7
9

2

neither of these fiddles work on Chrome 52 – stealthwang Aug 22 '16 at 21:37
both of them work for me on Chrome Version 52.0.2743.116 (64-bit) (Linux) – fassl Aug 24 '16 at 11:34
2

neither works on OSX. http://imgur.com/bqUQ09X – stealthwang Aug 24 '16 at 19:40
the question was about vertically aligning :before and :after elements and thats what the fiddles do, also in your screenshot – fassl Aug 26 '16 at 07:04
"I am trying to centre the link with the image" that isn't done in either example or my screenshot – stealthwang Sep 19 '16 at 16:33
Works as a charm nowadays. Used for a tiny icon that indicates a master-detail row in a table and aligns perfectly in the middle dynamically (resizing the window makes the element larger and smaller and the icon stays vertically centered (chrome)) – Youp Bernoulli Sep 15 '17 at 14:32

score 31 · Answer 3 · answered May 14 '10 at 09:30

31

I'm no CSS expert, but what happens if you put vertical-align: middle; into your .pdf:before directive?

answered May 14 '10 at 09:30

Chowlett

45,935
20
116
150

4

Awesome, middle did not work so I had to use a negative percentage instead, thanks for the heads up! – theorise May 14 '10 at 09:39
Glad to help. Did "middle" do nothing, or something-but-not-what-you-wanted? – Chowlett May 14 '10 at 09:41

score 14 · Answer 4 · answered Apr 02 '13 at 08:38

14

I think a cleaner approach is to inherit the vertical alignment:

In html:

<div class="shortcut"><a href="#">Download</a></div>

And in css:

.shortcut {
    vertical-align: middle;
}
.shortcut > a:after {
    vertical-align: inherit;
{

This way the icon will align properly in any resolution/font-size combination. Great for use with icon fonts.

answered Apr 02 '13 at 08:38

Sander van den Akker

1,545
11
13

Perfect. Simple and elegant – kasongoyo Aug 26 '16 at 09:51

score 11 · Answer 5 · answered Mar 01 '19 at 07:57

11

Using flexboxes did the trick for me:

.pdf:before {
    display: flex;
    align-items: center;
    justify-content: center;
}

answered Mar 01 '19 at 07:57

David Refoua

3,476
3
31
55

score 8 · Answer 6 · answered Oct 01 '19 at 17:00

8

This is what worked for me:

.pdf::before {
    content: url('path/to/image.png');
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
}

answered Oct 01 '19 at 17:00

Gjaa

1,461
1
19
20

score 6 · Answer 7 · answered May 14 '10 at 09:35

6

Messing around with the line-height attribute should do the trick. I haven't tested this, so the exact value may not be right, but start with 1.5em, and tweak it in 0.1 increments until it lines up.

.pdf{ line-height:1.5em; }

answered May 14 '10 at 09:35

Mathew

8,203
6
37
59

1

that should do the trick for text-content! – hereandnow78 Jul 02 '14 at 10:08

score 5 · Answer 8 · answered Nov 22 '13 at 09:53

I spent a good amount of time trying to work this out today, and couldn't get things working using line-height or vertical-align. The easiest solution I was able to find was to set the <a/> to be relatively positioned so it would contain absolutes, and the :after to be positioned absolutely taking it out of the flow.

a{
    position:relative;
    padding-right:18px;
}
a:after{
    position:absolute;
    content:url(image.png);
}

The after image seemed to automatically center in that case, at least under Firefox/Chrome. Such may be a bit sloppier for browsers not supporting :after, due to the excess spacing on the <a/>.

score 4 · Answer 9 · edited Oct 11 '12 at 04:10

4

I just found a pretty neat solution, I think. The trick is to set the line-height of image (or any content) height.

text

Using CSS:

div{
  line-height: 26px; /* height of the image in #submit span:after */
}

span:after{
    content: url('images/forward.png');
    vertical-align: bottom;
}

That would probably also work without the span.

edited Oct 11 '12 at 04:10

Konrad Viltersten

36,151
76
250
438

answered Jul 28 '12 at 11:26

JoomFever

41
1

score 3 · Answer 10 · answered Aug 02 '17 at 11:00

3

I had a similar problem. Here is what I did. Since the element I was trying to center vertically had height = 60px, I managed to center it vertically using:

top: calc(50% - 30px);

answered Aug 02 '17 at 11:00

user2606576

31
3

Vertically aligning CSS :before and :after content

10 Answers10

Linked