CODEWITHSUNDEEP
csspseudo-element
Riveascore
Riveascore

Reputation: 1852

Center content of pseudo element

I have a :before pseudo element displayed on :hover of a particular element.

I'm using font awesome and want to vertically center the content of the :before, but vertical align, margins etc haven't been of much help.

Any ideas?

.tile:before {
  font-family: FontAwesome;
  font-size: 150px;
  color: white;
  text-align: center;
  border-radius: 15px;  
  opacity: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  content: "\f16b";
  position: absolute;
  background-color: rgba(219,127,8, 0.7);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tile:hover:before {
  opacity: 1;
}

Upvotes: 0

Views: 189

Answers (2)

Riveascore
Riveascore

Reputation: 1852

Using :before as the cover background to display on top of the tile element, and an :after with:

.tile:after {
  top: 50%;
  left: 50%;
  /* Both half of font-size */
  margin-left: -75px;
  margin-top: -75px;
  height: 150px;
  line-height: 1;
}

Seemed to do the trick. Thanks all.

Upvotes: 1

Joshua
Joshua

Reputation: 328

Here are a few potential suggestions for .tile:before :

1 - use pixel value instead of 100% for height:

height: 100px;

2 - Make sure this is being displayed as an element that can ACCEPT margin, padding, etc.

display: block;

-or-

display: inline-block;

3 - I know you said you tried margins, but did you try padding-top?

padding-top: 20px;

4 - Try setting the overflow to hidden or visible. This often forces elements to behave "better."

overflow:hidden;

I would try all of these TOGETHER and see what happens.

Last, I might try setting a "top:" value since you have "position:absolute;" already. Maybe try this in conjunction with "position:relative;" too.

top: 10px;

Really need all the code (HTML) to tell what would work.

Upvotes: 1

Related Questions