Vertical align :after element

Question

I've tried the various responses here but no luck.

I need to vertical align an after element:

content: "";
width: 30px;
height: 15px;
background: transparent url('/img/test.png') no-repeat;
float: right;
border: 1px solid red;

This does not work:

vertical-align: middle;

Nor does:

vertical-align: -50%;

Ah thanks, unfortunately when I take this off and use inline display, it disappears. — panthro, May 05 '15 at 10:27

score 0 · Answer 1 · answered Jan 08 '16 at 13:22

0

From those answers linked to, the vertical-align:inherit; on the element worked for me when I set the parent element to vertical-align:top;, nothing else seemed to work for me.

answered Jan 08 '16 at 13:22

majick

318
2
8

score 0 · Answer 2 · answered Jan 08 '16 at 13:36

You can use line-height on the parent element and display:inline-block on the pseudo :after

.box {
  width: 100px;
  height: 100px;
  background: #CCC;
  line-height: 100px;
  text-align: center;
}
.box:after {
  content: "";
  width: 30px;
  height: 15px;
  background: transparent;
  border: 1px solid red;
  display: inline-block;
}

DEMO: https://jsfiddle.net/tianes/zhwL3rrq/

Vertical align :after element

2 Answers2