Pseudo-elements ::before và ::after trong CSS

Pseudo-elements ::before và ::after trong CSS được sử dụng để chèn nội dung trước và sau nội dung của một phần tử tương ứng. Chúng thường được dùng kết hợp với thuộc tính content để thêm văn bản, hình ảnh hoặc các ký tự đặc biệt.

Ví dụ 1: Thêm văn bản trước và sau đoạn văn

<!DOCTYPE html>
<html>
<head>
<style>
  div:nth-of-type(1) p:nth-child(2)::after {
    content: " BUZZINGA!";
    background: orange;
    padding: 5px;
  }
  div:nth-of-type(2) p:nth-child(2)::before {
    content: "Harry:";
    background-color: lightblue;
    font-weight: bold;
    padding: 5px;
  }
</style>
</head>
<body>
  <div>
    <p>Nobody: </p>
    <p>Sheldon Cooper:</p>
  </div><hr><div>
    <p><q>Death Eaters arrive</q></p>
    <p><q>Expecto Patronum!</q></p>
  </div>
</body>
</html>

Kết quả

Ví dụ 2: Tạo biểu tượng Yin-Yang với ::before và ::after

<!DOCTYPE html>
<html>
<head>
<title>Center Alignment using CSS Margin</title>
<style>
  #yinyangSymbol {
    width: 100px;
    height: 50px;
    background: #fff;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
  }
  #yinyangSymbol::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #fff;
    border: 18px solid #000;
    border-radius: 100%;
    width: 14px;
    height: 14px;
  }
  #yinyangSymbol::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 18px solid #fff;
    border-radius: 100%;
    width: 14px;
    height: 14px;
  }
  div {
    width: 50%;
    margin: 10px auto;
    border: 4px solid black;
  }
  #text {
    border: 4px solid black;
    background-color: grey;
    color: white;
    text-align: center;
  }
</style>
</head>
<body>
  <div id="main">
    <div>
      <div id="yinyangSymbol"></div>
    </div>
    <div id="text">Be Centered & Balanced</div>
  </div>
</body>
</html>

Kết quả

Ứng dụng thực tế: ::before và ::after thường được dùng để:

• Thêm icon decorative (font-awesome, Unicode characters)
• Tạo hình dạng幾何 (triangles, circles, ribbons)
• Clearfix cho container chứa floated elements
• Thêm dấu ngoặc, quotes cho blockquote
• Tạo tooltip thuần CSS

Lưu ý: Nội dung được chèn bằng ::before/::after không có trong DOM, do đó không thể truy cập bằng JavaScript và không được đọc bởi screen readers (trừ khi dùng content với văn bản thực).