Utilizing Multiple Pseudo-Elements in CSS for Enhanced Styling

Multiple Pseudo-elements

In CSS, it is possible to use multiple pseudo-elements in a single selector to apply styles to different parts of an element's content. This allows for more granular control over the appearance of specific elements and their various parts. You can combine multiple pseudo-elements to target different aspects of an element simultaneously.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multiple Pseudo-elements</title>
    <style>
      p::first-line {
        color: brown;
        font-size: 20px;
      }
      p::first-letter {
        color: blue;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h1>Multiple Pseudo-elements</h1>

    <h2>Sample Heading</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis aliquid sint nihil eaque dolor dolorum libero, dolorem in repellendus temporibus vero recusandae explicabo tempore mollitia laborum eum assumenda possimus consequatur.</p>

    <h2>Sample Heading</h2>
    <p>Lorem ipsum dolor, Veritatis aliquid sint nihil eaque dolor dolorum libero, dolorem in repellendus temporibus vero recusandae explicabo tempore mollitia laborum eum assumenda possimus consequatur.</p>
  </body>
</html>

Live Preview

The CSS code you provided targets the first line and the first letter of all <p> (paragraph) elements and applies different styles to them.

p::first-line: This selector targets the first line of text within all <p> elements. It selects the initial line of each paragraph.
color: brown;: This property sets the text color of the first line to brown.
font-size: 20px;: This property sets the font size of the first line to 20 pixels.
p::first-letter: This selector targets the first letter of text within all <p> elements. It selects the initial letter of each paragraph.
color: blue;: This property sets the text color of the first letter to blue.
font-size: 25px;: This property sets the font size of the first letter to 25 pixels.

You can also combine other pseudo-elements and pseudo-classes in a similar way, allowing for even more fine-grained control over the styling of elements and their various components. Just remember that the order of pseudo-elements matters, as each one builds upon the previous one, affecting the element's content structure accordingly.