CODEWITHSUNDEEP
csscss-selectors
Kevin Mamaqi
Kevin Mamaqi

Reputation: 355

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.

Upvotes: 0

Views: 136

Answers (2)

vignesh
vignesh

Reputation: 1011

Set the background image for this code as default .et_button_no_icon a.et_pb_button {... }

Upvotes: 0

Robbin van der Jagt
Robbin van der Jagt

Reputation: 796

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.

Upvotes: 2

Related Questions