CSS pseudo-element
0 3703
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
Waiting for your comments