image and text as value of content property

Question

I'm using the content: property to give content to pseudo-elements.

I know I can give it an image value with content:url(image.svg); and text with content:"Hello";`, but how do I give a image and a text value. Display the image left of the text?

Answer 1

For anyone looking for a solution later, just add both url() and "String" with a space between to the content of before:: pseudo-element.

a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " EXTRA TEXT AFTER THE ICON: ";
}

<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS documentation is here: https://developer.mozilla.org/en-US/docs/Web/CSS/content#Image_combined_with_text

As an alternative you can use content and background combination:

a::before {
      content:" EXTRA TEXT AFTER THE ICON: ";
      background: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") no-repeat center left;
      padding-left: 35px;
    }

<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>