Chèn mã html với lệnh css | Học lập trình cùng iif

Cách chèn mã html với lệnh css, giúp ta ứng dụng trong khi làm app web rất nhanh.

Cơ chế tạo ra HTML từ lệnh CSS
Các ví dụ về tạo HTML từ lệnh CSS
Cú pháp sử dụng

1. Cơ chế tạo ra HTML từ lệnh CSS

CSS có thể giả lập một số nội dung hiển thị bằng ::before hoặc ::after

CSS có thể thêm nội dung ảo xung quanh một phần tử có sẵn — không phải thật sự là HTML mới, mà chỉ là hiệu ứng hiển thị.

2. Các ví dụ về tạo HTML từ lệnh CSS

Ví dụ 01

<p>Xin chào</a>
<style>
p:after {
content: "-X-";
}
p:before { content: "-Y-" }
</style>
Sau khi chạy bạn xem kết quả ? cho nhận xét vì sao thẻ p lại chèn thêm html -X- và -Y-

Ví dụ 02

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<h1>XIN CHÀO tôi là iif</h1>
<p>Là trang web chuyên dạy học lập trình</p>
</body>
</html>

<div class="box">Nội dung chính</div>

.box::before {
content: "Trước:";
color: red;
}
.box::after {
content: " - Sau";
color: green;
}

Hãy chạy và xem kết quả

3. Cú pháp sử dụng

Cú pháp để chèn lệnh

tên_thẻ:after / before {
content: "..";
lệnh css;
}

Tìm kiếm:

Cách chèn mã html với lệnh css, giúp ta ứng dụng trong khi làm app web rất nhanh.