Liên hệ
css

Pseudo-element trong CSS3

Sử dụng kỹ thuật Pseudo trong CSS3 để chọn và thiết lập trình bày cho thành phần cấu tạo nên phần tử như ::after ::before

Pseudo Element

Kỹ thuật Pseudo Element chọn ra thành phần của phần tử, nó bắt đầu bởi ký hiệu ::

  • ::first-line - chọn dòng text đầu tiên
  • ::first-letter - ký tự đầu tiên
  • ::selection - chọn phần tử đang được người dùng chọn
  • ::before - chèn thêm nội dung vào trước phần tử
  • ::after - chèn thêm nội dung vào sau phần tử

Ví dụ ::first-line

<style>
    .exam1::first-line {
        color: red;
        font-weight: bold;
    }
</style>

<p class="exam1">Dòng chữ 1<br>Dòng chữ 2<br>Dòng chữ 3</p>

Dòng chữ 1
Dòng chữ 2
Dòng chữ 3

Ví dụ ::selection

Thay đổi màu nền và chữ khi người dùng chọn text ở đoạn văn trong trình duyệt

<style>
    p::selection {
        background: #b92c28;
        color: #fff;
    }
</style>

Ví dụ ::before và ::after

<style>
    .exam2::before {
        content: url("https://cdn4.iconfinder.com/data/icons/famous-character-vol-2-flat/48/Avatar_Famous_Characters-20-128.png");
    }
    .exam2::after {
        content: 'Thêm sau phần tử';
        background: green;
        color: whitesmoke;
    }

</style>

<div class="exam2">
    Bên trong phần tử
</div>
Bên trong phần tử

Chú ý phần content trong ::after và ::before

Vui lòng đăng ký ủng hộ kênh