CSS - Phần tử giả

Phần tử giả CSS được sử dụng để thêm hiệu ứng đặc biệt cho một số bộ chọn. Bạn không cần sử dụng JavaScript hoặc bất kỳ tập lệnh nào khác để sử dụng các hiệu ứng đó. Cú pháp đơn giản của phần tử giả như sau:

selector:pseudo-element {property: value}

Các lớp CSS cũng có thể được sử dụng với các phần tử giả -

selector.class:pseudo-element {property: value}

Các phần tử giả được sử dụng phổ biến nhất như sau:

Sr.No. Giá trị & Mô tả
1

:first-line

Sử dụng phần tử này để thêm các kiểu đặc biệt vào dòng đầu tiên của văn bản trong bộ chọn.

2

:first-letter

Sử dụng phần tử này để thêm kiểu đặc biệt vào chữ cái đầu tiên của văn bản trong bộ chọn.

3

:before

Sử dụng phần tử này để chèn một số nội dung trước phần tử.

4

:after

Sử dụng phần tử này để chèn một số nội dung sau phần tử.

Phần tử giả: dòng đầu tiên

Ví dụ sau minh họa cách sử dụng phần tử : first-line để thêm các hiệu ứng đặc biệt vào dòng đầu tiên của phần tử trong tài liệu.

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs to nline class.
      </p>
      
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

Nó sẽ tạo ra liên kết sau:

Phần tử giả: chữ cái đầu tiên

Ví dụ sau minh họa cách sử dụng phần tử : first-letter để thêm các hiệu ứng đặc biệt cho chữ cái đầu tiên của các phần tử trong tài liệu.

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and will have font size 10 px;
      </p>
      
      <p>
         The first character of this paragraph will be 5em big as defined in the 
         CSS rule above. Rest of the characters in this paragraph will remain 
         normal. This example shows how to use :first-letter pseduo element 
         to give effect to the first characters  of any HTML element.
      </p>
   </body>
</html>

Nó sẽ tạo ra liên kết đen sau:

Phần tử: trước phần tử giả

Ví dụ sau minh họa cách sử dụng phần tử : before để thêm một số nội dung vào trước bất kỳ phần tử nào.

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

Nó sẽ tạo ra liên kết đen sau:

Phần tử: sau phần tử giả

Ví dụ sau minh họa cách sử dụng phần tử : after để thêm một số nội dung vào sau phần tử bất kỳ.

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Nó sẽ tạo ra liên kết đen sau: