codescracker


css

CSS Pseudo-Elements



« Previous Tutorial Next Tutorial »


The specialized elements in CSS, which are used to apply styles to a portion of a Web page, are called pseudo-elements.

Pseudo-elements allow you to apply styling rules to sub parts of elements content.

Pseudo-elements also allow the CSS complaint browsers to access a part of an HTML document which otherwise is not accessible using HTML elements. These are called pseudo-elements because they are not a part of the standard markup of HTML.

According to the CSS3 specialization, a pseudo-element always start with a double colon (::).

CSS Pseudo-Element Syntax

The syntax to declare a pseudo-element in CSS is given as follows :

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

CSS ::first-line Pseudo-Element

The ::first-line pseudo element available in CSS, used to add special effect (using CSS) to the first line of text. Here is an example, uses CSS ::first-line pseudo-element:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Pseudo Elements Example</title>
	<style>
		p::first-line { color:red; font-variant:small-caps; }
	</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special
 effect to the first line of a text. This is CSS pseudo-element
 tutorial. This is CSS pseudo-element example. This is CSS 
 pseudo-element exercise. This is CSS pseudo-element test.</p>
</p>

</body>
</html>

Here is the sample output of the above CSS ::first-line pseudo element example code:

css pseudo elements example

Now, stretch the browser window to place more text in the first line to watch whether the applied style works or not. Here is the another snapshot of the output produced by the same above CSS example code in the same browser with different dimension:

css pseudo element example

CSS ::first-letter Pseudo-Element

Here is an example uses CSS ::first-letter pseudo-element shows how to use ::first-letter pseudo element to add special effect (using CSS) to the first character of any text:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Pseudo Element Example</title>
	<style>
		p::first-letter { color:red; font-size:x-large; }
	</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add
 a special effect to the first character of a text.</p>

</body>
</html>

Here is the sample output produced by the above CSS ::first-letter pseudo-element example code:

css first letter pseudo element

You are free to use pseudo-elements and CSS classes together. Here is an example, uses CSS class and CSS pseudo-element together:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Pseudo Element Example</title>
	<style>
		p.chdo::first-letter { color:red; font-size:250%; }  
	</style>
</head>
<body>

<p class="chdo">This is a paragraph.</p>
<p>This is CSS Pseudo Element Tutorial. This is CSS Pseudo
Element Example. This is CSS Pseudo Element Test.</p>

</body>
</html>

Below is the sample output of the above CSS pseudo element example code:

css pseudo element and class together

CSS Multiple Pseudo-elements

You can also apply multiple pseudo-elements. Here is an example, shows how to use multiple pseudo-elements in CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Multiple Pseudo Elements Example</title>
	<style>
		p::first-letter { color:#ff0000; font-size:xx-large; }
		p::first-line { color:#0000ff; font-variant:small-caps; }
	</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements
 to add a special effect to the first 
letter and the first line of a text</p>

</body>
</html>

The above CSS multiple pseudo element example code will produce the following output:

css multiple pseudo element

CSS ::before Pseudo-Element

Here is an example uses ::before Pseudo-Element in CSS:

<!DOCTYPE html>
<html>
<head>
<style>
	h2::before { content: url(cat.jpg); }
</style>
</head>
<body>

<h2>This is a Main Heading</h2>
<p>The ::before pseudo-element inserts content before an element.</p>

<h2>This is also a Main heading</h2>
<p>You can also add images before starting paragraph</p>

</body>
</html>

Here is the sample output produced by the above CSS ::before pseudo element example code:

css pseudo elements

CSS ::after Pseudo-Element

Here is an example uses ::after Pseudo-Element in CSS:

<!DOCTYPE html>
<html>
<head>
<style>
	h2::after { content: url(cat.jpg); }
</style>
</head>
<body>

<h2>This is a Main Heading</h2>
<p>The ::after pseudo-element inserts content after an element.</p>

<h2>This is also a Main heading</h2>
<p>You can also add images after the ending of paragraph</p>

</body>
</html>

Here is the sample output of the above CSS ::after pseudo-element example code:

css after pseudo elements

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test