Cách sử dụng after css và before css

23/01/2025

Các ví dụ này sử dụng before và after để thêm nội dung hoặc biểu tượng trước hoặc sau các phần tử HTML và CSS.

1. After css là gì?

Trong CSS, ::after là một pseudo-element (phần tử giả) được sử dụng để chèn nội dung vào cuối phần tử HTML đã chọn, nhưng nội dung này không thay đổi cấu trúc HTML thực tế. Nội dung được chèn là phần bổ sung để cải thiện giao diện hoặc chức năng của trang web.

Cách sử dụng cơ bản:

css

selector::after { content: "nội dung"; /* các thuộc tính CSS khác */ }

Đặc điểm của `::after`:

Tạo nội dung ảo: Nội dung này được thêm vào DOM dưới dạng một phần tử ảo và không thực sự có mặt trong HTML.
Chỉ hoạt động khi khai báo content: Thuộc tính content là bắt buộc khi sử dụng ::after. Nếu không có, ::after sẽ không xuất hiện.
css

.example::after { content: ""; }
Tích hợp với CSS: Bạn có thể áp dụng các thuộc tính CSS như màu sắc, độ rộng, chiều cao, border, padding, margin, v.v.
Thường dùng để thêm hình ảnh, biểu tượng, hoặc định dạng bổ sung: ::after hay được dùng trong các mục đích trang trí hoặc cải thiện giao diện mà không làm thay đổi nội dung chính.

Ví dụ sử dụng:

1. Thêm văn bản sau phần tử:

html

<p class="example">Chào bạn</p>

css

.example::after { content: " - Xin chào!"; color: blue; }

Hiển thị trên trình duyệt:
Chào bạn - Xin chào!

2. Thêm biểu tượng sau liên kết:

html

<a href="https://example.com" class="external">Trang bên ngoài</a>

css

.external::after { content: " ????"; font-size: 14px; }

Hiển thị trên trình duyệt:
Trang bên ngoài ????

3. Tạo hình dạng hoặc biểu tượng bổ sung:

css

.button::after { content: ""; display: block; width: 10px; height: 10px; background-color: red; border-radius: 50%; margin-left: 10px; }

::after là một công cụ mạnh mẽ để hỗ trợ thiết kế mà không cần sửa đổi HTML, giúp giữ cho mã nguồn ngắn gọn và dễ quản lý.

2. Before css

Trong CSS, ::before là một pseudo-element (phần tử giả) được sử dụng để thêm nội dung ảo vào trước nội dung của một phần tử HTML, giúp cải thiện giao diện hoặc cung cấp thông tin bổ sung mà không cần thay đổi cấu trúc HTML.

Cách sử dụng cơ bản:

css

selector::before { content: "nội dung"; /* Các thuộc tính CSS khác */ }

Đặc điểm của `::before`:

Tạo nội dung trước phần tử: ::before giúp bạn chèn nội dung trước nội dung chính của phần tử mà không làm thay đổi mã HTML thực tế.
Thuộc tính content là bắt buộc: Không giống như các thuộc tính CSS khác, ::before sẽ không hoạt động nếu không khai báo content.
Tích hợp với CSS hoàn chỉnh: Bạn có thể sử dụng các thuộc tính CSS như font, color, background, hoặc thậm chí tạo các khối hình dạng phức tạp.
Ứng dụng linh hoạt: Thường được sử dụng để chèn ký tự, biểu tượng, hoặc trang trí giao diện mà không làm ảnh hưởng đến cấu trúc DOM.

Ví dụ sử dụng:

1. Thêm văn bản trước nội dung:

html

<p class="welcome">Xin chào!</p>

css

.welcome::before { content: "★ "; color: gold; font-size: 16px; }

Kết quả hiển thị:
★ Xin chào!

2. Thêm biểu tượng trước danh sách:

html

<ul> <li class="custom">Mục 1</li> <li class="custom">Mục 2</li> </ul>

css

.custom::before { content: "→ "; color: green; font-weight: bold; }

Kết quả hiển thị:

→ Mục 1
→ Mục 2

3. Tạo hình dạng bổ sung trước phần tử:

html

<div class="box">Hộp</div>

css

.box::before { content: ""; display: inline-block; width: 20px; height: 20px; background-color: red; margin-right: 10px; }

Kết quả hiển thị:
[Hình vuông đỏ] Hộp

4. Thêm dấu ngoặc trước văn bản trích dẫn:

html

<q class="quote">Thành công đến từ nỗ lực!</q>

css

.quote::before { content: "“"; color: gray; font-size: 24px; }

Kết quả hiển thị:
“Thành công đến từ nỗ lực!”

Điểm khác biệt giữa `::before` và `::after`:

::before: Thêm nội dung ảo trước nội dung thực của phần tử.
::after: Thêm nội dung ảo sau nội dung thực của phần tử.

Ứng dụng thực tế:

Thêm các biểu tượng như dấu tích, mũi tên, hoặc hình ảnh trước nội dung.
Trang trí danh sách với các ký tự đặc biệt.
Làm nổi bật phần đầu của các đoạn văn bản.
Tạo hình dạng hoặc lớp phủ để cải thiện giao diện.

::before là một công cụ mạnh mẽ giúp các nhà thiết kế tạo giao diện đẹp mắt và gọn gàng hơn mà không phải thay đổi mã HTML.

3. Ví dụ cách sử dụng after css

Đây là 10 ví dụ về cách sử dụng after trong CSS:

Thêm nội dung sau phần tử:

css

.box::after { content: "Sau đây là một ví dụ"; }
Tạo một dấu phân cách sau nội dung:

css

.list li::after { content: " | "; }
Chỉ định biểu tượng sau phần tử:

css

.button::after { content: url('arrow.png'); }
Thêm chú thích sau phần tử:

css

.quote::after { content: " - Albert Einstein"; }
Hiển thị số lượng mục trong danh sách:

css

.list-item::after { content: counter(item); }
Thêm ký tự đầu dòng sau mỗi mục danh sách:

css

.list li::after { content: "\A"; white-space: pre; }
Chỉ định một biểu tượng sau liên kết ngoài:

css

a[href^="http"]::after { content: url('external-link.png'); }
Thêm dấu chấm câu sau mỗi câu trong đoạn văn:

css

p::after { content: "."; }
Chỉ định một biểu tượng trước mỗi mục danh sách:

css

ul li::before { content: "\2022"; }
Thêm một biểu tượng sau từ khóa hoặc thuật ngữ trong văn bản:

css

.definition::after { content: " (định nghĩa)"; }

4. Ví dụ cách sử dụng before css

Đây là 10 ví dụ về cách sử dụng before trong CSS:

Thêm nội dung trước phần tử:

css

.title::before { content: "Tiêu đề: "; }
Chỉ định một dấu phân cách trước nội dung:

css

.list li::before { content: "| "; }
Thêm một biểu tượng trước phần tử:

css

.icon::before { content: url('icon.png'); }
Chèn ký tự đầu dòng trước mỗi mục danh sách:

css

.list li::before { content: "\A"; white-space: pre; }
Thêm số thứ tự cho mỗi mục danh sách:

css

.list-item::before { content: counter(item) ". "; }
Chỉ định một biểu tượng trước liên kết ngoài:

css

a[href^="http"]::before { content: url('link.png'); }
Thêm dấu chấm câu trước mỗi câu trong đoạn văn:

css

p::before { content: "• "; }
Thêm biểu tượng trước từ khóa trong văn bản:

css

.keyword::before { content: "Keyword: "; }
Chỉ định một biểu tượng trước mỗi mục danh sách:

css

ul li::before { content: "\2022"; }
Thêm một biểu tượng trước mỗi từ trong đoạn văn:

css

p span::before { content: "???? "; }