Kevin Kevin - 5 months ago 14
CSS Question

CSS background image using :after only shows when on hover

I have an anchor element with the class

.et_pb_button
and the following CSS (SASS):

.et_button_no_icon .et_pb_button {

&:after {
display: inline-block;
position: absolute;
margin-left: 30px;
content: "";
background: url("images/boton_rojo.png");
width: 28px;
height: 27px;
margin-top: 2px;
}
}


The problem is that the image only shows on hover. See the link here: http://oasysgp.kevinmamaqi.com/ (the anchor is Nuestras Empresas, below the first parragraph).

I would like to display the image in normal and on hover.

Answer

In your .et_pb_button:after there is a opacity: 0; and I found a .et_pb_button:after display: none in your css style. Sadly you haven't uploaded your source maps so I cant see on which line this is. But disabling the display:none, and disabling the opacity: 0; did the trick for me.