CSS pseudo-elements



The CSS pseudo-elements enable you to style the elements or parts of the weather while not adding any IDs or categories to them. it'll be very useful within the things once you simply need to vogue the primary letter of a paragraph to form the drop cap result otherwise you need to insert some content before or once a component, etc. solely through sheet

selector::pseudo-element {
 property: value; 
}

The ::first-line Pseudo-element

Example

<!DOCTYPE html>
    <html>
    <head>
    <title>Example of CSS ::first-line Pseudo-element</title>
    <style> 
        p::first-line {
            color: purple;
            font-variant: small-caps;
        }
    </style>
    </head>
    <body>        
        <p>
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
        </p>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.


The ::first-letter Pseudo-element

Example

<!DOCTYPE html>
<html>
<head>
<title>Example of CSS ::first-letter Pseudo-element</title>
<style> 
    p::first-letter {
        color: red;
        font-size: xx-large;
    }
</style>
</head>
<body>        
    <p>The first letter of this paragraph is styled differently.</p>
</body>
</html>


Click on the "Run This Code" button to see how it works.





CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units