How to center content using :before in CSS

Question

I have the following css code:

Which generates a hover over an image.

The hover effect is a blue cover and a white arrow which slides in from the left.

Like so:

Unhovered:

Hovered:

"\f04b" is the white arrow. How can I center the icon in the blue box? I tried adding padding to

sidebar-article-thumb:before, .sidebar-best-thumb:before

but it adds padding to the entire blue overlay, not the white icon inside.

How can I center the icon inside the blue box?

.sidebar-article-thumb img,
.sidebar-best-thumb img {
  border: 1px solid #021a40;
  position: relative;
  max-width: none;
  height: 100%;
  width: auto;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.sidebar-article-thumb:before,
.sidebar-best-thumb:before {
  content: "\f04b";
  font-family: FontAwesome;
  font-size: 40px;
  color: #fff;
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: #00ade6;
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

I found the following: :before, :after and padding

Which seemed relevant, but could not figure out how to apply it to the above css.

Share your `html` snippet also. – Saif Jun 20 '18 at 23:07 — Saif, Jun 20 '18 at 23:07
Try to make online demo with your code. – SaidbakR Jun 21 '18 at 00:33 — SaidbakR, Jun 21 '18 at 00:33

score 0 · Answer 1 · answered Jun 21 '18 at 00:37

0

Line-height will do it, \f04b is a character.

line-height: 50%;

or

line-height: 100px;

answered Jun 21 '18 at 00:37

dan178

335
2
16

score 0 · Answer 2 · answered Jun 21 '18 at 00:41

Use position: relative in the container and

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

in the pseudo-element (:before) to center the character.

Example:

.container {
 position: relative;

 /* Demo */
 width: 300px;
 height: 300px;
 border: 1px solid #000;
}

.container:before {
  content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);

 /* Demo */
 width: 30px;
 height: 30px;
 border: 1px solid #000;
}

<div class="container"></div>

score 0 · Answer 3 · answered Jun 21 '18 at 00:43

0

Try using vertical-align: middle;

answered Jun 21 '18 at 00:43

Jack Bashford

43,180
11
50
79

score 0 · Answer 4 · answered Jun 21 '18 at 00:51

0

Using flexbox on the container would work wonders.

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

JSFiddle

(I just generated my own arrow instead of using font-awesome, but the principles are still the same)

answered Jun 21 '18 at 00:51

jmulder5

41
4

I still can't comment on other posts (just started up today). Using position absolute requires you to know the height and width of your element and subtract that from 50%. vertical-align will, of course, only center it vertically. Using flexbox is the best and easiest method for centering it both vertically and horizontally. – jmulder5 Jun 21 '18 at 00:55
You don't have to know the width and height at all, just use transform: translate(-50%,-50%); (this works the same way a margin-top: - ( height / 2 ) and margin.left: (width / 2 ) work. – agustin Jun 21 '18 at 04:21

How to center content using :before in CSS

4 Answers4