CSS Pseudo Element
CSS Pseudo Element dùng để thêm css vào 1 phần của thẻ. Ví dụ thêm css vào dòng đầu tiên (first-line), hoặc thêm css vào kí tự đầu tiên (first-letter), hoặc thêm content vào trước hoặc sau nội dung của thẻ. Ta xem các ví dụ sau nhé.
<style>
p::first-line {
color:red;
}
p::first-letter {
font-size: 40px;
}
p::before {
content: "Begin ";
}
p::after {
content: " After";
}
</style>
<p>CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.</p>
CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.
Ta cũng có thể dùng CSS Pseudo Element với class.
<style>
p.myP::first-line {
color:blue;
}
p.myP::first-letter {
font-size: 40px;
}
p.myP::before {
content: "Begin ";
}
p.myP::after {
content: " After";
}
</style>
<p class="myP">CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.</p>
CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.CSS is Awesome.