Pseudo Element trong CSS | Phần tử giả trong CSS

Pseudo Element (có thể gọi là các phần tử giả) được sử dụng để thêm các hiệu ứng đặc biệt cho một số Selector. Bạn không cần sử dụng JavaScript hoặc bất cứ ngôn ngữ Script nào để sử dụng các hiệu ứng này. Cú pháp đơn giản của Pseudo Element trong CSS như sau: selector:pseudo-element ...

Pseudo Element (có thể gọi là các phần tử giả) được sử dụng để thêm các hiệu ứng đặc biệt cho một số Selector. Bạn không cần sử dụng JavaScript hoặc bất cứ ngôn ngữ Script nào để sử dụng các hiệu ứng này. Cú pháp đơn giản của Pseudo Element trong CSS như sau:

selector:pseudo-element {property: value}

Các Class trong CSS cũng có thể được sử dụng với Pseudo Element như sau:

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

Dưới đây là một số cách sử dụng phổ biến của Pseudo Element:

Giá trị Miêu tả
:first-line Sử dụng phần tử này để thêm Style đặc biệt cho dòng đầu tiên của đoạn văn trong một Selector
:first-letter Sử dụng phần tử này để thêm Style đặc biệt cho chữ cái đầu tiên của đoạn văn trong một Selector
:before Sử dụng phần tử này để chèn nội dung nào đó vào trước một phần tử
:after Sử dụng phần tử này để chèn nội dung nào đó vào sau một phần tử

:first-line Pseudo Element trong CSS

Nếu bạn cần thêm một số hiệu ứng đặc biệt nào đó cho dòng đầu tiên của đoạn văn, bạn có thể sử dụng :first-line Pseudo Element trong CSS. Ví dụ:

<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"> Dong text nay se khong co dau gach chan, boi vi thuoc tinh text-decoration co gia tri none.</p>
      
      <p>Dong text dau tien nay se co dau gach chan ben duoi theo CSS rule ben tren. 
      Cac dong text con lai van hien thi binh thuong (khong co dau gach chan). 
      Day la vi du minh hoa cach su dung cua :first-line Pseduo Element de ap dung hieu ung dac biet 
      cho dong text dau tien.</p>
   </body>
</html>

Kết quả là:

:first-letter Pseudo Element trong CSS

Chẳng hạn, nếu bạn muốn thay đổi kích cỡ font cho chữ cái đầu tiên trong các phần tử, bạn có thể sử dụng :first-letter trong CSS. Phần tử này sẽ áp dụng Style đặc biệt cho chữ cái đầu tiên của các phần tử trong một Selector. Ví dụ:

<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"> Chu cai dau tien van se duoc hien thi theo binh thuong va co Font Size la 10 px.</p>
      
      <p>Chu cai dau tien cua doan van se co Font Size la 5em va co mau den nhu trong CSS rule tren. 
      Cac ky tu con lai trong doan van se van hien thi binh thuong theo Font Size mac dinh. 
      Day la vi du minh hoa cach su dung cua :first-letter Pseduo Element de tao hieu ung dac biet cho chu 
      cai dau tien trong doan van.</p>
   </body>
</html>

Kết quả là:

:before Pseudo Element trong CSS

Để thêm một số nội dung vào trước phần tử nào đó, bạn có thể sử dụng :before Pseudo Element trong CSS. Ví dụ:

<html>
   <head>
      <style type="text/css">
         p:before
         {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>
   <body>
      <p> Dong text nay se duoc dat truoc boi mot Bullet.</p>
      <p> Dong text nay se duoc dat truoc boi mot Bullet.</p>
      <p> Dong text nay se duoc dat truoc boi mot Bullet.</p>
   </body>
</html>

Kết quả là:

:after Pseudo Element trong CSS

Sử dụng :after Pseudo Element trong CSS, bạn có thể thêm một số nội dung vào sau một phần tử nào đó trong một Selector. Ví dụ:

<html>
   <head>
      <style type="text/css">
         p:after
         {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>
   <body>
      <p> Dong text nay se duoc theo sau boi mot Bullet.</p>
      <p> Dong text nay se duoc theo sau boi mot Bullet.</p>
      <p> Dong text nay se duoc theo sau boi mot Bullet.</p>
   </body>
</html>

Kết quả là:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại code24h.com:

Bài liên quan

Các Pseudo-Element trong CSS

Các Pseudo-Element là gì? Pseudo-element trong CSS được dùng để định dạng một phần đặc biệt của phần tử. Ví dụ chúng được sử dụng để: Định dạng chữ hoặc dòng đầu tiên của phần tử Chèn nội dung vào trước hoặc sau nội dung của phần tử Cú pháp Cú pháp của ...

Hoàng Hải Đăng viết 14:41 ngày 07/09/2018

Cách chọn phần tử dựa theo quan hệ huyết thống trong CSS

Mối quan hệ giữa các phần tử Trong một tập hợp các phần tử HTML, chúng cũng có những mối quan hệ huyết thống giống như con người chúng ta. Ví dụ, tôi có một đoạn mã HTML như sau: <div> <p> <h2> <h3></h3> </h2> ...

Tạ Quốc Bảo viết 11:10 ngày 18/08/2018

Cách định dạng phần tử dựa theo trạng thái của phần tử trong CSS

Thông thường, khi người dùng thực hiện một hành động nào đó tác động lên phần tử, khi đó phần tử sẽ nhận một trạng thái Ví dụ: Khi ta bấm vào phần tử, phần tử sẽ nhận trạng thái active Khi ta dí chuột vào phần tử, phần tử sẽ nhận trạng thái hover Khi ta bấm vào phần tử input, phần tử sẽ ...

Trịnh Tiến Mạnh viết 11:06 ngày 18/08/2018

Cách căn lề cho phần tử khối trong CSS

Căn lề cho phần tử khối (Block element) Một phần tử khối sẽ có chiều rộng chiếm toàn bộ chiều rộng của phần tử chứa nó, và sẽ có ngắt xuống dòng ở cả trước và sau của khối. Ví dụ, dưới đây là các thẻ tạo phần tử khối: <div> <p> <h1> - <h6> .... Ở bài ...

Tạ Quốc Bảo viết 11:03 ngày 18/08/2018

Cách chọn phần tử dựa theo thuộc tính và giá trị thuộc tính trong CSS

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách chọn ra các phần tử dựa theo: Tên thuộc tính của phần tử Giá trị thuộc tính của phần tử Bộ chọn [attribute] Bộ chọn [attribute] dùng để chọn ra các phần tử có chứa thuộc tính được chỉ định. Ví dụ Đoạn mã dưới đây dùng để chọn: ...

Bùi Văn Nam viết 11:00 ngày 18/08/2018
0