Proper Usage of background-image in CSS :before and :after Pseudo-elements

Problem Analysis and Background

In CSS development, pseudo-elements :before and :after are essential techniques for adding decorative content without modifying HTML structure. However, developers often encounter issues when attempting to use the background-image property on these pseudo-elements.

Consider this typical scenario: a developer wants to add border decorations to a div element, using the :before pseudo-element to display a left border image. The initial code might look like this:

#videos-part{
    background-color: #fff;
    height: 127px;
    width: 764px;
    margin: -6px 0 -1px 18px;
    position: relative;
}
#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
}

While this code appears correct, the background image fails to display when executed. The root cause lies in the box model characteristics of pseudo-elements.

Core Issue Explanation

CSS pseudo-elements, while inheriting some styles from their parent elements, essentially function as independent box models. When no explicit height is specified for a pseudo-element, its default height becomes 0, meaning the background image has no visible area to display, even though it's properly defined.

According to CSS specifications, pseudo-element dimension calculations follow standard box model rules. Without an explicit height property, inline pseudo-elements (defaulting to inline display) derive their height from content. When the content property is set to an empty string or space, the actual content height becomes 0, resulting in a total pseudo-element box height of 0.

Furthermore, background image display depends on the element's visible area. Even with background-image set, if the element has no actual dimensions, the background has nowhere to render. This explains why the background image remains invisible in the initial code, despite all other properties being correctly configured.

Solution and Implementation

To resolve this issue, an explicit height value must be specified for the pseudo-element. The modified code appears as follows:

#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
    height: 20px;
}

By adding the height: 20px; declaration, we create a definite rendering area for the pseudo-element. Now the background image has sufficient space to display and can properly render the border effect.

The key to this solution lies in understanding the independence of pseudo-elements. Although pseudo-elements are associated with parent elements in the DOM structure, they possess their own box models during rendering. Each pseudo-element must have individually defined dimensions to ensure correct display of visual properties like backgrounds and borders.

Technical Details Deep Dive

Several important factors require consideration in practical applications:

First, height value selection should be based on the actual dimensions of the background image and design requirements. If the image height is 20 pixels, the pseudo-element height should also be set to 20 pixels to ensure complete image display without cropping.

Second, the use of absolute positioning enables precise placement of the pseudo-element to the left of the parent element. Through left: -16px;, the pseudo-element is positioned outside the parent element's boundary, creating a visual border effect.

Additionally, the setting of the content property deserves attention. While a space character is used here, other content or complete omission might be necessary in certain scenarios. The important point is to ensure the pseudo-element has content (even if empty) to be properly created.

Best Practice Recommendations

Based on this case study, we can summarize several best practices for using background images in pseudo-elements:

Always explicitly define dimensions for pseudo-elements. Whether using width and height, or creating visible areas through other methods (like padding), ensure pseudo-elements have adequate rendering space.

Consider using the display property to control the box model type of pseudo-elements. In some cases, setting pseudo-elements to display: block; might better suit design requirements.

Test performance across different browsers. While modern browsers show considerable consistency in pseudo-element support, subtle differences may still appear in complex layouts.

Use background repetition properties appropriately. If background image tiling within pseudo-elements is desired, add the background-repeat property to control repetition behavior.

Extended Application Scenarios

This technique applies to various design scenarios:

Creating custom borders and decorative elements, like the left border in our case study.

Implementing icon decorations, adding small icons before or after text content.

Building complex visual separators, combining multiple pseudo-elements to create intricate design effects.

Adaptive decorative elements in responsive design, adjusting pseudo-element dimensions and backgrounds through media queries.

By deeply understanding pseudo-element characteristics and proper usage methods, front-end developers can create more flexible and maintainable interface designs while preserving HTML structure simplicity.