8 ví dụ thực tế áp dụng ::after và ::before trong CSS (phần 1)

::after và ::before chắc chắn không còn là CSS selector xa lạ gì với các bạn đã biết về lập trình web. Tuy vậy, khi gặp một UI, có khi bạn lại không nghĩ đến nó có thể được tạo ra bằng cách sử dụng 2 selectors thần thánh này. Ở bài viết này, hãy cùng mình tìm hiểu 4 ví dụ thực tế có thể áp dụng 2 selectors này nhé.

CSS selector và CSS declaration

Sau khi có bộ khung HTML chắc chắc, trang web của bạn sẽ cần CSS để đảm nhiệm vai trò sắp đặt bố cục (layout), màu sắc,… khiến trang web trở nên đẹp hơn rất nhiều.

Khi học CSS, chắc chắn các bạn sẽ học qua: selector và declaration.

Ví dụ như khi xây một ngôi nhà, bạn đã làm xong phần khung, giờ đến giai đoạn sơn tường và trang trí. Vậy bạn cần thông tin gì để sơn được? Bạn sẽ cần 2 thông tin: sơn chỗ nào và sơn màu gì.

Quay lại với mục đích của chúng ta khi sử dụng CSS, đó chính là style cho các thành phần trên trang web, tương tự như bạn làm đẹp cho ngôi nhà của mình vậy. Bạn cần biết sơn chỗ nào (selector) và sơn màu gì (declaration). CSS cũng như vậy, bạn cần chỉ cho browser biết bạn muốn style chỗ nào bằng cách sử dụng selector và style ra sao sử dụng declaration.

Ở bài viết hôm nay, chúng ta sẽ nói về 2 selector khá thú vị trong CSS, đó chính là ::after và ::before.

::after và ::before selector là gì?

Trong CSS, ::after tạo ra một psudo-element ngay sau element được chọn, ::before tạo ra một psudo-element ngay trước element được chọn.

Ví dụ:

Bạn muốn thêm một mũi tên vào sau tất cả các link trong trang web, bạn có thể sử dụng CSS như sau:

/* Add an arrow after links */
a::after {
  content: "→";
}

Đây là định nghĩa cơ bản của ::after và ::before. Giờ chúng ta sẽ tới phần thú vị nhất, 8 ví dụ thực tế áp dụng ::after và ::before nhé.

Ví dụ 1: Thêm dấu * vào trường bắt buộc trong form

Trong một form, bạn thường thấy các trường bắt buộc hay có một dấu * để nhắc người dùng đây là trường bắt buộc. Để làm điều này, bạn hoàn toàn có thể sử dụng ::after.

<label class="required">Full name</label>
<input type="text" placeholder="e.g. John Doe" />

<style>
    .required:after {
        content: " *";
        color: red;
    }
</style>

Và kết quả là:

Thật đơn giản phải không nào.

Ví dụ 2: Hiệu ứng khi hover cho text

Bạn có muốn khi đưa chuột vào một link, gạch chân của text sẽ dần chuyển thành nền của text không? Thử đoạn code sau nhé:

<a href="#" class="link">Green</a>

<style>
.link {
  text-decoration: none;
  color: green;
  position: relative;
  transition: color ease 0.3s;
}
.link:hover {
  color: #fff;
}
.link:after {
  content: ' ';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 5%;
  left:0;
  bottom: 0;
  background-color: green;
  transition: all ease 0.3s;
}
.link:hover::after {
  height: 100%
}

Và kết quả là:

Ví dụ 3: Hamburger Menu

Hôm nay chúng ta sẽ thử làm hamburger menu theo phong cách CSS nhé.
Thử đoạn code sau nhé:

<div class="hamburger-menu"></div>

<style>
.hamburger-menu {
  margin-top: 20px;
  width: 50px;
  height: 6px;
  background: #000;
  position: relative;
}
.hamburger-menu::before,
.hamburger-menu::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #000;
}
.hamburger-menu::before{
  top:-16px;
}
.hamburger-menu::after {
  top: 16px;
}
</style>

Và kết quả là:

Ví dụ 4: Câu trích dẫn xịn sò

Bạn thử đoán xem đoạn code sau giúp chúng ta có gì nhé?

<div lang="en">
  <blockquote>Stay hungry. Stay foolish.</blockquote>
  <cite>- Steve Jobs</cite>
</div>

<style>
 blockquote::before {
   content: open-quote;
 }
 blockquote::after {
   content: close-quote;
 }
 blockquote::before,
 blockquote::after {
   display: inline-block;
   vertical-align: bottom;
   color: lightgray;
   font-size: 4em;
   top: .2em;
   position: relative;
 }
</style>

Và kết quả là:

Kết luận

Như vậy là qua bài viết này, mình đã chia sẻ với mọi người 4 ứng dụng thực tế của CSS ::before và ::after. Mong rằng nó cho bạn một góc nhìn và cách tiếp cận mới mẻ khi chúng ta sử dụng CSS trong công việc. Trong phần tiếp theo, mình sẽ giới thiệu đến các bạn 4 ứng dụng thực tế khác của 2 selectors thần thánh này nhé.

Các bạn có thể tìm hiểu thêm về CSS trong bài viết liên quan sau nhé : CSS-in-JS là gì? Đôi nét về thư viện Styled-components