How to make the pseudo-element before work?

Asked

Viewed 232 times

1

I have the pseudo-element before but I’ve done everything and I can’t make it work. The image doesn’t appear at all.

section.conteudopadrao a:before{
content: url("./anuncie/pdf.png");
}

For several days I am in search of this operation and nothing works with the before.

css

  • Section.conteudopadrao a::before{ content: url("./advertise/pdf.png"); }, see if it works.

  • https://www.w3schools.com/cssref/sel_before.asp

  • @Brunocastro did not work!

1 answer

3


This works for me

section.conteudopadrao a:before{
    content: url("http://www.bestadsontv.com/images/facebook.gif");
}

Therefore, the solution proposed by Bruno above should work

section.conteudopadrao a:before{
    content: url("./anuncie/pdf.png");
}

In case it doesn’t work, try it like this:

section.conteudopadrao a:before{
    content: url("/anuncie/pdf.png");
}

If you still have problems, check if the image path is correct.

EDIT

According to information about your folder structure, the correct thing is to use the code below in your CSS. ;)

section.conteudopadrao a:before{
    content: url("../anuncie/pdf.png");
}

  • It worked by putting the full url. The other options didn’t work out! Thank you very much.

  • 1

    @Gladison, the problem with putting the full URL is that if you change your address, or even the folder where the CSS is, it’s best to use relative path. We’ll help you, what folder your HTML/PHP is in and what folder your CSS is in?

  • the image is in the folder anuncie and the css inside the folder css the file php is at the server root.

  • I downloaded @Gladison thought the CSS was in the same location as the PHP file. I modified the answer, and now the relative path should work correctly. PS just fixing my previous text that I ended up "eating" a part of it: "the problem of putting the full URL is that if you change address, or even the folder where the CSS is, você terá que modificar todos os arquivos que estão com URLs absolutas, it is best to use relative path."

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.