Sử dụng CSS content như thế nào cho đúng
Thuộc tính content trong CSS thường được sử dụng cùng với 2 ghost element là after và before, những giá trị nào có thể đưa vào cho thuộc tính content này <div data-done="✅" class="email"> chriscoyier@gmail.com </div> .email::before { /* Chèn trước thẻ div giá trị của data-done + Email: */ content: attr(data-done) " Email: "; } Không phải giá trị nào đưa vào content này cũng hợp lệ /* Được */ ::after { content: "1"; } /* Không được */ ::after { content: 1; } Không thể tính toán gì đâu, nó chỉ là string thôi <div data-price="4" data-sale-modifier="0.9">Coffee</div> /* Méo chạy */ div::after { content: " $" calc(attr(data-price) * attr(data-sale-modifier)); } /* Nope */ ::after { content: calc(2 + 2); } Muốn nối chuỗi ư? /* Không chạy đâu, không phải javascript hay php */ ::after { content: "1" . "2" . "3"; content: "1" + "2" + "3"; /* Dùng bình thường thế này thôi */ content: "1" "2" "3"; content: "1 2 3"; } Đường dẫn hình thì được, mà không cho thay đổi kích thước hình ¯_(ツ)_/ p:before { content: url(image.jpg); } Station D via Vuilaptrinh
Thuộc tính content trong CSS thường được sử dụng cùng với 2 ghost element là after và before, những giá trị nào có thể đưa vào cho thuộc tính content này
<div
data-done="✅"
class="email">
chriscoyier@gmail.com
</div>
.email::before {
/* Chèn trước thẻ div giá trị của data-done + Email: */
content: attr(data-done) " Email: ";
}
Không phải giá trị nào đưa vào content này cũng hợp lệ
/* Được */
::after {
content: "1";
}
/* Không được */
::after {
content: 1;
}
Không thể tính toán gì đâu, nó chỉ là string thôi
<div data-price="4" data-sale-modifier="0.9">Coffee</div>
/* Méo chạy */
div::after {
content: " $"
calc(attr(data-price) * attr(data-sale-modifier));
}
/* Nope */
::after {
content: calc(2 + 2);
}
Muốn nối chuỗi ư?
/* Không chạy đâu, không phải javascript hay php */
::after {
content: "1" . "2" . "3";
content: "1" + "2" + "3";
/* Dùng bình thường thế này thôi */
content: "1" "2" "3";
content: "1 2 3";
}
Đường dẫn hình thì được, mà không cho thay đổi kích thước hình ¯_(ツ)_/
p:before {
content: url(image.jpg);
}
Station D via Vuilaptrinh
Bạn có thể quan tâm
- Applicant Tracking System là gì? ATS hoạt động ra sao(Cẩm Nang Tuyển Dụng)
- Principle thiết kế của các sản phẩm nổi tiếng(Công Nghệ)
- Bộ cài đặt Laravel Installer đã hỗ trợ tích hợp Jetstream(Công Nghệ)
