Tidadigi Logo

CSS ::before selector

Selector CSS ::before cho phép bạn chèn nội dung trước nội dung thực tế của một phần tử. Thường dùng để thêm các thành phần trang trí hoặc biểu tượng. Nó giúp tăng tính thẩm mỹ mà không thay đổi cấu trúc HTML.

Selector ::before đi kèm với thuộc tính content để xác định nội dung chèn vào. Bạn có thể định kiểu nội dung chèn vào bằng color, background và positioning.

Syntax

element::before {
    content: "content";
    /* additional styles */
}

Note: Theo mặc định, nội dung ::before là inline. Nghĩa là nó sẽ xuất hiện cùng nội dung gốc của phần tử trừ khi có thêm kiểu dáng. Ví dụ: display: block; hoặc position: absolute; được áp dụng.

What is the ::before Selector?

Selector ::before chèn nội dung vào trước nội dung thực của phần tử đã chọn. Nó không ảnh hưởng đến luồng tài liệu. Có thể dùng để thêm văn bản, biểu tượng hoặc các yếu tố trực quan khác. Việc này không làm thay đổi chính HTML.

Nó thường đi kèm với thuộc tính content để xác định nội dung được chèn vào. Ví dụ bạn có thể dùng nó để thêm biểu tượng hoặc văn bản trước tiêu đề. Hay là trước các đoạn văn.

Property Values

PropertyDescription
content: " ";Chèn nội dung trống hoặc tùy chỉnh trước phần tử.
background-color: yellow;Đặt màu nền cho nội dung đã chèn.
color: red;Thay đổi màu chữ của nội dung đã chèn.
font-weight: bold;Làm cho nội dung đã chèn trở nên đậm.
display: block;Thay đổi bố cục của nội dung đã chèn từ inline sang block.

CSS ::before selector Example

Đây là một ví dụ về selector ::before. Bạn có thể thấy nội dung được chèn trước văn bản thực của mỗi phần tử <p>.

Nội dung được chèn được định kiểu riêng biệt. Nó thể hiện sự linh hoạt và sức mạnh của pseudo-element ::before trong CSS.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>::before Selector Example</title>
    <style>
        body {
            text-align: center;
            background-color: lightgray;
        }

        /* ::before selector to add content before <p> elements */
        p::before {
            content: "Note: ";
            font-weight: bold;
            color: blue;
            background-color: yellow;
            padding: 2px 5px;
            margin-right: 5px;
            border-radius: 3px;
        }

        /* Styling for <p> elements */
        p {
            color: black;
            font-size: 18px;
        }

        /* Styling for headers */
        h1 {
            color: white;
            background-color: darkblue;
            padding: 10px;
        }

        h2 {
            color: white;
            background-color: darkgreen;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>::before Selector Example</h2>

    <p>This paragraph shows how to use the ::before pseudo-element.</p>

</body>

</html>

Output:

css-before-selector

Supported Browsers

  • Google Chrome 1.0
  • Edge 12.0
  • Firefox 1.5
  • Safari 4.0
  • Opera 7.0

Note: Opera versions 4-6 support :before (single colon) syntax, while later versions use ::before (double colon) as per the CSS3 specification.


Last Updated : 21/07/2025