Chèn mã html với lệnh css

Cách chèn mã html với lệnh css

Cách chèn mã html với lệnh css

<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ụ 2 css chèn html:

<!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>

<style>
body:after {
    content: "Cuối trang";
    display: block;
    margin-top: 2em;
    text-align: center;
}
p:after {
    content: "Xin chào tôi là iif";
    display: block;
    margin-top: 2em;
    text-align: center;
}
</style>

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

Tóm lại:

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

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

Cách chèn mã html với lệnh css