CSS - Pseudo Elements

Xin chào các pháp sư CSS tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới ma thuật của các phần tử giả trong CSS. Là giáo viên máy tính thân thiện trong khu phố của bạn, tôi rất vui mừng được hướng dẫn bạn trong chuyến phiêu lưu này. Vậy, hãy cầm lấy những枝 c魔法 (bàn phím) của bạn và cùng nhau lặn sâu vào!

Tổng quan

Hãy tưởng tượng bạn đang trang trí một căn phòng. Bạn đã có đồ nội thất (các phần tử HTML) của mình ở đó, nhưng bạn muốn thêm một chút nét riêng mà không cần thay đổi đồ nội thất. Đó chính là vai trò của các phần tử giả! Chúng giống như những饰品 ma thuật bạn có thể thêm vào các phần tử HTML mà không thực sự thay đổi HTML.

Cú pháp

Trước khi chúng ta bắt đầu conjure (viết mã), hãy học cách conjuration (cú pháp):

selector::pseudo-element {
property: value;
}

Chú ý đến dấu hai chấm (::)? Đó chính là枝 c魔法 của chúng ta! Nó nói với trình duyệt, "Hey, tôi sắp tạo ra điều gì đó đặc biệt ở đây!"

CSS ::after Pseudo-element

Hãy bắt đầu với phần tử giả ::after. Nó giống như một trợ lý ma thuật theo sau phần tử của bạn, mang theo nội dung bổ sung.

.magic-box::after {
content: "?";
margin-left: 5px;
}

Trong ví dụ này, mỗi phần tử có lớp "magic-box" sẽ có một biểu tượng mũ phù thủy xuất hiện ngay sau nó. Đó như thể chúng ta đã kéo một con thỏ (hoặc trong trường hợp này, một chiếc mũ) ra khỏi mũ CSS của chúng ta!

CSS ::before Pseudo-element

Nếu ::after là trợ lý theo sau phần tử của bạn, thì ::before là người dẫn đường. Nó thêm nội dung trước phần tử.

.wizards-name::before {
content: "?‍♂️ ";
}

Bây giờ, mỗi tên pháp sư sẽ có biểu tượng pháp sư trước nó. Abracadabra!

CSS ::first-letter Pseudo-element

Muốn làm cho văn bản của bạn trông như một cuộn giấy ma thuật cổ xưa? ::first-letter chính là법术 của bạn!

p::first-letter {
font-size: 2em;
color: #8A2BE2;
float: left;
margin-right: 5px;
}

Điều này sẽ làm cho chữ cái đầu tiên của mỗi đoạn văn lớn hơn, màu tím và nổi bên trái. Đó như thể bạn có một người viết ma thuật chiếu sáng bản thảo của bạn!

CSS ::first-line Pseudo-element

Tương tự như ::first-letter, nhưng cho toàn bộ dòng đầu tiên của văn bản.

p::first-line {
font-weight: bold;
color: #4B0082;
}

Bây giờ dòng đầu tiên của mỗi đoạn văn sẽ in đậm và màu lam. Đó như thể bạn đang nhấn mạnh phần quan trọng nhất của cuộn giấy ma thuật của bạn!

CSS ::selection Pseudo-element

Bạn từng muốn tùy chỉnh cách văn bản trông như thế nào khi được chọn? ::selection chính là법술 của bạn cho điều đó!

::selection {
background-color: #FFD700;
color: #000000;
}

Bây giờ khi bạn chọn văn bản trên trang của bạn, nó sẽ có nền vàng và chữ đen. Đó như thể bạn đã biến con trỏ của bạn thành vua Midas!

Nhiều phần tử giả

Bạn có thể sử dụng nhiều phần tử giả trên một phần tử duy nhất. Đó như thể叠加법 thuật để tạo ra hiệu ứng ma thuật mạnh mẽ hơn!

.magical-quote::before,
.magical-quote::after {
content: '"';
font-size: 2em;
color: #FF1493;
}

Điều này sẽ thêm dấu ngoặc kép trước và sau các phần tử có lớp "magical-quote", làm cho chúng nổi bật như những lời tiên tri ma thuật!

Bảng phương pháp phần tử giả

Dưới đây là một cuốn sách법 thuật (bảng) của tất cả các phương pháp phần tử giả mà chúng ta đã học:

Phần tử giả	Mô tả	Ví dụ
::after	Thêm nội dung sau phần tử	.element::after { content: "?"; }
::before	Thêm nội dung trước phần tử	.element::before { content: "?‍♂️"; }
::first-letter	Định dạng chữ cái đầu tiên của văn bản	p::first-letter { font-size: 2em; }
::first-line	Định dạng dòng đầu tiên của văn bản	p::first-line { font-weight: bold; }
::selection	Định dạng văn bản được chọn	::selection { background-color: gold; }

Nhớ nhé, các pháp sư trẻ, sức mạnh của các phần tử giả nằm ở khả năng của chúng trong việc thêm style và nội dung mà không làm rối loạn HTML. Chúng giống như những người giúp đỡ vô hình, luôn ở đó khi bạn cần, nhưng không bao giờ làm phiền bạn.

Khi chúng ta kết thúc chuyến phiêu lưu ma thuật trong CSS, tôi hy vọng bạn cảm thấy灵感 để thử nghiệm với các phần tử giả này. Đừng sợ kết hợp,叠加 và kết hợp. Giới hạn duy nhất là trí tưởng tượng của bạn!

Trong những năm dạy học của tôi, tôi đã thấy học sinh tạo ra những điều kỳ diệu với những công cụ đơn giản này. Một học sinh thậm chí đã sử dụng các phần tử giả để tạo ra một aquarium ảo, với những con cá (::before và ::after elements) bơi qua màn hình!

Vậy hãy tiến lên, vẫy枝 c CSS của bạn, và tạo ra một chút ma thuật của riêng bạn. Và hãy nhớ, trong thế giới phát triển web, bạn永远不会太老 để tin vào một chút ma thuật. Chúc các bạn vui vẻ khi mã hóa, và mong rằng stylesheet của bạn luôn không có lỗi!

Credits: Image by storyset