CSS ::Before ::After Image Background Code Snippet

See it in action:

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

   content: "";
    width: 2vw;
    height: 2vw;
    background:url("") no-repeat;
  background-size: contain;
    top: 1%;
    right: 1%;
    display: inline-block;


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”
Leave a Comment

Your email address will not be published. Required fields are marked *