CSS pseudo-element

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>

Leave a Reply

avatar
  Subscribe  
Notify of