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.