CSS pseudo-elements-CSS Tutorial-php.cn

CSS pseudo-elements

WBOY

Release： 2023-09-10 21:09:01

forward

752 people have browsed it

We can style specific parts of an element, such as the first letter, first line, or even insert before/after it. For this purpose, use CSS pseudo-elements.

Note - To separate CSS pseudo-classes from pseudo-elements, in CSS3 pseudo-elements use double-colon notation.

Syntax

The following is the syntax for using CSS pseudo-elements on an element-

Selector::pseudo-element {
   css-property: /*value*/;
}

Copy after login

The following are all available CSS pseudo-elements-

##123456##Let’s see an example of a CSS pseudo-element-

Sr.No	Pseudo-elements and description
	after Insert some content after each mentioned element
	before Insert the content before the content of each mentioned element
	First Letters It selects the first letter of each mentioned element
	first-line It selects the first line of each mentioned element
	placeholder It selects the placeholder text within the form element
	selection< strong> It selects the portion of the element selected by the user

Example

Live Demonstration

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
   background-color: black;
}
p::first-line {
   background-color: lightgreen;
   color: white;
}
span {
   font-size: 2em;
   color: #DC3545;
}
</style>
</head>
<body>
<h2>Computer Networks</h2>
<p><span>A</span> system of interconnected computers and computerized peripherals such as printers is called computer network. </p>
</body>
</html>

Copy after login

Output

Let’s see another example of CSS pseudo-elements -

CSS 伪元素 Example

Real-time demonstration

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) p:nth-child(2)::after {
   content: " LEGEND!";
   background: orange;
   padding: 5px;
}
div:nth-of-type(2) p:nth-child(2)::before {
   content: "Book:";
   background-color: lightblue;
   font-weight: bold;
   padding: 5px;
}
</style>
</head>
<body>
<div>
<p>Cricketer</p>
<p>Sachin Tendulkar:</p>
</div>
<hr>
<div>
<p><q>Chase your Dreams</q></p>
<p><q>Playing It My Way</q></p>
</div>
</body>
</html>

Copy after login

Output

The above is the detailed content of CSS pseudo-elements. For more information, please follow other related articles on the PHP Chinese website!