CSS pseudo-element

0 3734

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>