Pseudo-elements

Pseudo elements

Pseudo elements are used to apply styles to a specific part of an element.

Pseudo elements Explanation
first-line applies style to the first line of a block-level element
first-letter applies style to the first letter of a block-level element
before generates content before an element
after generates content after an element

The before and after pseudo elements are used with the content property. However, these two pseudo elements are not supported in MSIE.

Syntax

There is a colon between the selector and the pseudo element.

Selector:Pseudo-element { Property: Value }

For example :
p:first-line { color: red }

Pseudo elements can also be used with classes.

Selector.Normal-class:Pseudo-element { Property: Value }

For example :
p.example:first-line { color: red }

The first-line pseudo element

The first-line pseudo element apply style to the first line of a block-level element.

p:first-line { color: red }

In the above example, the style is applied to the first line of the P element.

<html>
<head>
<title>TAG index</title>

<style type="text/css">

p { width: 40%; }
p:first-line { color: red; }

</style>

</head>
<body>

<p>This is the first paragraph. Some text ...</p>
<p>This is the second paragraph. Some text ...</p>
<p>This is the third paragraph. Some text ...</p>

</body>
</html>
Example page

The first-letter pseudo element

The first-letter pseudo element apply style to the first letter of a block-level element.

p:first-letter { color: red }

In the above example, the style is applied to the first letter of the P element.

<html>
<head>
<title>TAG index</title>

<style type="text/css">

p { width: 40%; }
p:first-letter {
font-size: 150%;
font-weight: bold;
color: red;
}

</style>

</head>
<body>

<p>This is the first paragraph. Some text ...</p>
<p>This is the second paragraph. Some text ...</p>
<p>This is the third paragraph. Some text ...</p>

</body>
</html>
Example page

The before and after pseudo element

The before and after pseudo elements generates content before or after an element. (Use with the content property)

p:before { content: "Example" }

In the above example, the content is generated before the P element.

p:after { content: "Example" }

In the above example, the content is generated after the P element.

<html>
<head>
<title>TAG index</title>

<style type="text/css">

p { width: 40%; }

p:before {
content: "Note:";
color: red;
}
p:after {
content: url(icon.gif);
}

</style>

</head>
<body>

<p>This is the first paragraph. Some text ...</p>
<p>This is the second paragraph. Some text ...</p>
<p>This is the third paragraph. Some text ...</p>

</body>
</html>
Example page

Pseudo elements and Classes

The style can be applied only to the elements with the specified class by using the class.

p.example:first-line { color: red }

In the above example, the style is applied only to the P elements that have the class "example".

<html>
<head>
<title>TAG index</title>

<style type="text/css">

p { width: 40%; }
p.example:first-line { color: red; }

</style>

</head>
<body>

<p class="example">The style is applied to this paragraph. Some text ...</p>
<p>The style is not applied to this paragraph. Some text ...</p>

</body>
</html>
Example page

Nesting

The style can be applied only to elements within a certain element by using descendant selectors.

Type selector and Pseudo element :

div p:first-line { color: red }

In this example, the style is applied only to the P elements within the DIV element.

Class selector and Pseudo element :

.example p:first-line { color: red }

In this example, the style is applied only to the P elements within the element with the class "example".

ID selector and Pseudo element :

#example p:first-line { color: red }

In this example, the style is applied only to the P elements within the element with the ID "example".

<html>
<head>
<title>TAG index</title>

<style type="text/css">

p { width: 40%; }
.example p:first-line { color: red }

</style>

</head>
<body>

<div class="example">
<p>The style is applied to this paragraph. Some text ...</p>
<p>The style is applied to this paragraph. Some text ...</p>
</div>

<div>
<p>The style is not applied to this paragraph. Some text ...</p>
</div>

</body>
</html>
Example page