[go: up one dir, main page]

Test: Image in the content CSS property

Inspect elements/pseudo-elements to see which exact CSS styles are being tested.

Using ::before and ::after

There should be an icon before the text

There should be an icon after the text

And an icon here --> <-- (base64 URL)

Resizing the image with CSS? (width + height)

Resizing the image with CSS? (width + AUTO height)

With :before and :after (for IE8)

There should be an icon before the text

There should be an icon after the text

And an icon here --> <-- (base64 URL)

SVG image maybe?

External SVG image with width/height

External SVG without width/height; dimensions set in CSS (should be bigger)

External SVG sprite (symbol)

External SVG sprite (:target)

External SVG sprite, other icon (:target)

Conclusions

The good news: inserting an image as content of a ::before or ::after works everywhere.

The less good news: there are several limitations, so you’re probably better off using background-image if you want to insert a decorative image (using a pseudo-element or not). Some details:

  1. If the content: url(…) image is a bitmap, it will take its own intrinsic dimensions, and cannot be resized in CSS. Virtually, it’s like the browser is creating the following structure: 
    <element>
  <before>
  <img />
  </before>
  …
</element>
    And there is no way to style the generated image.
  2. If that image is a SVG, it can be resized in CSS (by sizing the pseudo-element itself). Not sure why.
  3. Using SVG sprites doesn’t work. Referencing a <symbol> doesn’t work, and using the :target technique works in Firefox and IE but not in Chrome, and makes sizing the image rather tricky.
  4. For IE8, use the :before and :after syntax, and bitmap images only.