28. Pseudo-element Trong CSS

Pseudo-element trong CSS là cách để tạo ra các phần tử ảo, cho phép bạn chọn và áp dụng kiểu cho phần của một phần tử cụ thể mà không cần thêm thẻ HTML. Các pseudo-elements thường được sử dụng để tạo hiệu ứng trang trí, như thêm nền cho tiêu đề hoặc tạo hiệu ứng gạch chân.

Dưới đây là một số ví dụ về cách sử dụng các pseudo-elements trong CSS:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Pseudo-Element Example</title>
</head>
<body>
  <div class="container">
    <p>This is a paragraph.</p>
    <h2>This is a heading.</h2>
  </div>
</body>
</html>

CSS (styles.css):

css

.container p::first-line {
  font-weight: bold; /* Chọn dòng đầu tiên trong phần tử <p> và làm in đậm */
}

.container h2::before {
  content: "🌟 "; /* Thêm nội dung ảo trước tiêu đề <h2> */
}

.container h2::after {
  content: " 🌟"; /* Thêm nội dung ảo sau tiêu đề <h2> */
}

Trong ví dụ này, chúng ta sử dụng các pseudo-elements khác nhau:

.container p::first-line: Sử dụng pseudo-element ::first-line để chọn dòng đầu tiên trong mỗi phần tử <p> trong .container và làm in đậm dòng đó.
.container h2::before: Sử dụng pseudo-element ::before để thêm nội dung ảo trước mỗi phần tử <h2> trong .container, ở đây chúng ta thêm một biểu tượng sao 🌟.
.container h2::after: Sử dụng pseudo-element ::after để thêm nội dung ảo sau mỗi phần tử <h2> trong .container, ở đây chúng ta cũng thêm biểu tượng sao 🌟.

Các pseudo-elements cho phép bạn tạo ra hiệu ứng và trang trí một cách linh hoạt mà không cần thêm thẻ HTML bổ sung vào trong mã nguồn.

Leave a Comment Cancel Reply