See it in action: https://codepen.io/sean-vosler/pen/poxVbdN

Code for adding an image background to the before or after of a selector…

.main:before{
   content: "";
    width: 2vw;
    height: 2vw;
    background:url("https://img.icons8.com/external-others-inmotus-design/67/external-Beta-greek-alphabet-letters-and-symbols-others-inmotus-design-11.png") no-repeat;
  background-size: contain;
    top: 1%;
    right: 1%;
    display: inline-block;
}

Explained…

This CSS code is defining the style for a pseudo-element :before of an element with the class .main. Here’s a breakdown of what each line does:

.main:before: This targets the :before pseudo-element of any HTML element with the class main. The ::before pseudo-element is a “virtual” element that will be inserted before the content of the .main element.

content: “”;: This is necessary for the :before pseudo-element to work. It specifies what will be inserted. In this case, it’s an empty string, which means no actual content will be inserted, but the pseudo-element will still be created, allowing for the other properties to take effect.

width: 2vw; and height: 2vw;: These set the width and height of the pseudo-element to 2% of the viewport width each. The viewport is the user’s visible area of a web page.

background: url(“…”) no-repeat;: This sets the background image of the pseudo-element to the URL provided, and no-repeat ensures that the image will not repeat if it’s smaller than the box.

background-size: contain;: This makes sure that the background image scales while maintaining its aspect ratio until it fits within the pseudo-element’s content box.

top: 1%; and right: 1%;: These position the pseudo-element 1% from the top and 1% from the right of the .main element. However, note that these properties would only have an effect if the .main element or one of its ancestors has a position value other than static, and the pseudo-element itself would need to be absolutely positioned.

display: inline-block;: This allows the pseudo-element to have a width and height (which inline elements cannot have), but without forcing a new line (which block elements do).

So, in summary, this CSS code creates a pseudo-element before the content of the .main element, gives it a specific width and height, sets a background image for it, and positions it at a specific location.

For me when I’m searching for this later…

1. “CSS before pseudo-element examples”
2. “How to use CSS before pseudo-element”
3. “CSS background image in pseudo-element”
4. “CSS positioning with pseudo-elements”
5. “CSS viewport units with pseudo-elements”
6. “How to add image before content using CSS”
7. “CSS background-size contain example”
8. “CSS no-repeat background image in pseudo-element”
9. “Using CSS to insert image before text”
10. “CSS inline-block display with pseudo-elements”
11. “Examples of CSS pseudo-elements with background images”
12. “CSS top and right positioning in pseudo-elements”
13. “How to use CSS to add decorative elements”
14. “Styling with CSS pseudo-elements”
15. “CSS pseudo-element with background image tutorial”
16. “How to use CSS to add icons before content”
17. “Using CSS to add symbols before text”
18. “How to use CSS to create a badge or marker”
19. “CSS pseudo-element positioning and sizing”
20. “Adding a background image to a pseudo-element in CSS”