CSS pseudo-element

by Prasun Roy 02-Jul-16

75 0 418

CSS pseudo-element: Style the first letter, or line, of an element without adding any IDs or classes to them.

::before - Insert something after content of each element
::after - Insert something before content of each element
::first-letter - Select first letter of each element
::first-line - Select first line of each element


Example: 1 (::before)

<!DOCTYPE html>
<html>
<head>
<style>
p::before {
content: url(smiley.gif);
}
</style>
</head>
<body>

<p> This is a heading </p>

</body>
</html>

Example: 2 (::after)

<!DOCTYPE html>
<html>
<head>
<style>
p::after {
content: url(smiley.gif);
}
</style>
</head>
<body>

<p> This is a heading </p>

</body>
</html>

Example: 3 (::first-letter)

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #8A2BE2;
font-size:28px;
}
</style>
</head>
<body>

<p> This is a heading </p>

</body>
</html>

Example: 4 (::first-line)

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #8A2BE2;
font-weight:bold;
}
</style>
</head>
<body>

<p> This is a heading </p>

</body>
</html>


Share:

Comments

Leave a Reply