Categories
CSS Tutorials

Pseudo Elements

The CSS pseudo-elements allow you to style the elements or parts of the elements without adding any IDs or classes to them. It will be really helpful in situations when you just want to style the first letter of a paragraph to create the drop cap effect or you want to insert some content before or after an element, etc. only through a style sheet.

CSS3 introduced a new double-colon (::) syntax for pseudo-elements to distinguish between them and pseudo-classes.

Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

Syntax:

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

There are many pseudo elements in CSS but the ones which are most commonly used are discussed below.

::first-line pseudo-element

It applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.

Example:

<html>
    <head>
        <title>first-line Demo</title>
        <style>
            body {
                padding:0 200px;
                background-color: whitesmoke;
                color: red;
                font-size: large;
                text-align: center;
            }
            p::first-line {
                color: skyblue;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h1>Edupoly Tutorials</h1>
        <h2>::first-line element</h2>
        <p>
            This is a paragraph using first-line pseudo-element to style first line of the paragraph. Content in the first line turns skyblue and becomes bold. But the remaining content of the paragraph is not changed and remains red in colour.
        </p>
    </body>
</html>

Output:

::first-letter pseudo-element

applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.

Example:

<html>
	<head>
		<title>first-letter Demo</title>
		<style>
			body {
				background-color: whitesmoke;
				color: red;
				font-size: large;
				text-align: center;
			}
			p::first-letter {
				color: skyblue;
				font-size: 30px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<h1>Edupoly</h1>
		<h2>::first-letter element</h2>
		<p>
			This is a paragraph using first-letter pseudo-element to style the first letter of the paragraph. The first-letter pseudo-element turned the first letter of this paragraph to blue and made it bold.
		</p>
	</body>
</html>

Output:

The ::before and ::after pseudo-elements

The ::before and ::after pseudo-elements can be used to insert generated content either before or after an element’s content. The content CSS property is used in conjunction with these pseudo-elements, to insert the generated content. This is very useful for further decorating an element with rich content that should not be part of the page’s actual markup. You can insert regular strings of text or an embedded object such as image and other resources using these pseudo-elements.

Example:

<html>
    <head>
        <meta charset="utf-8">
        <title>Example of CSS ::before and ::after Pseudo-element</title>
        <style>
            h1::before {
                content: '"';
                color: red;
                font-size: 30px;
            }
            h1::after {
                content: '"';
                color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <h1>Edupoly Tutorials</h1>
    </body>
</html>

Output:

::marker pseudo-element

It selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.

Example:

<html>
	<head>
		<title>marker Demo</title>
		<style>
			body {
				background-color: whitesmoke;
				color: red;
				text-align: center;
			}
			ul {
				width: 40px;
			}
			ul li::marker {
				color: skyblue;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<h1>Edupoly Tutorials</h1>
		<h2>::marker element</h2>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</body>
</html>

Output:

::selection pseudo-element

It applies styles to the part of a document that has been highlighted by the user such as clicking and dragging the mouse across the text.

Example:

<html>
	<head>
		<title>selection Demo</title>
		<style>
			body {
				background-color: whitesmoke;
				color: green;
				text-align: center;
			}
			p::selection {
				color: red;
				background-color: skyblue;
				font-size: 30px;
			}
			::selection {
				color: skyblue;
				background-color: red;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<h1>Edupoly Tutorials</h1>
		<h2>::selection element</h2>
		<p>Content in this paragraph turns red with
			blue background on selection.</p>
		<span>As this is not a paragraph, you can notice red
			background and skyblue text on selection.</span>
	</body>
</html>

Output: