Phần tử giả trong CSS là gì

Phần tử giả CSS về cơ bản là một bộ chọn cho các phần cụ thể của phần tử như chữ cái đầu tiên, dòng đầu tiên, v.v.:after và:before các phần tử giả có thể được sử dụng để chèn vào sau và trước một phần tử tương ứng.

Cú pháp

Sau đây là cú pháp để sử dụng các phần tử CSS Pseudo trên một phần tử -

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

Ví dụ

Hãy xem một ví dụ về CSS Pseudo Elements -

<!DOCTYPE html>
<html>
<head>
<style>
ol, ul {
   list-style: none;
   counter-reset: demo_var2;
}
ul {
   counter-reset: demo_var1;
}
ol > li::before {
   counter-increment: demo_var2;
   content: counter(demo_var2, lower-roman) ") ";
}
li::after {
   counter-increment: demo_var1;
   content: " " counter(demo_var1) ". ";
}
</style>
</head>
<body>
<ul>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
</ul>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Phần tử giả trong CSS là gì

Ví dụ

Hãy xem một ví dụ khác về CSS Pseudo Elements -

<!DOCTYPE html>
<html>
<head>
<style>
   ::-webkit-input-placeholder { /*Support for Edge */
   color: blue;
   font-style: italic;
}
:-ms-input-placeholder { /*Support for Internet Explorer */
   color: blue;
   font-style: italic;
}
::placeholder {
   color: blue;
   font-style: italic;
}
</style>
</head>
<body>
<h2> Sample Form </h2>
<textarea id="desc" name="desc" rows="5" cols="33" placeholder="Type here"></textarea>
<br />
<input type="text" name="author" placeholder="author name">
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Phần tử giả trong CSS là gì