CSS

Tìm hiểu ::before và ::after qua ví dụ cụ thể

Demo: Ở web mình dùng khá nhiều, điển hình là ví dụ phần widget bạn bè rê vào có tooltip hiện ra nhé.

Tìm hiểu before và after
Tìm hiểu before và after

Chào các bạn. Chắc hẳn đối với những người chuyên làm website, nhất là dựng giao diện thì có lẽ không còn quá xa lạ với 2 thuộc tính ::before::after nữa nhưng đối với bạn nào mới tìm hiểu thì sẽ cảm thấy có chút khó khăn làm sao để sử dụng thành thạo 2 thuộc tính này. Vì thế mà hôm nay, mình sẽ giúp các bạn tìm hiểu 2 thuộc tính ::before::after thông qua một số ví dụ cụ thể và hay được áp dụng trong việc thiết kế website để các bạn có cái nhìn bao quát nhất có thể nhé.

Tìm hiểu khái niệm

Trước khi vào từng ví dụ thì ta hãy tìm hiểu qua khái niệm 2 thuộc tính này để hiểu cơ bản xem chúng là gì?

  • ::before – cho phép chèn nội dung phía trước phần tử
  • ::after – ngược lại với ::before sẽ là cho chèn nội dung phía sau phần tử

Cú pháp cơ bản

selector::before {
  content:" Nội dung cần thêm ";
}

hoặc

selector::after {
  content:" Nội dung cần thêm ";
}

Thực hành với 1 số ví dụ cơ bản

Mình sẽ đi từ những ví dụ đơn giản nhất rồi đến ví dụ cần nhiều CSS hơn.

Ví dụ 1: Thêm chữ đằng trước hoặc đằng sau phần tử

HTML:

<p>Tớ là Cường!</p>

CSS:

p::before {
  content:"Xin chào - ";
}

p::after {
  content:" Admin PC Dev Share.";
}

Kết quả nhận được:

Tớ là Cường!

Tớ là Cường!

Như các bạn có thể thấy rằng: Đối với HTML như trên ta sẽ chỉ xuất ra được màn hình hiển thị dòng chữ Tớ là Cường! Nhưng khi ta thêm cho nó 2 thuộc tính ::before::after thì lập tức ngày sau dòng chữ đó sẽ xuất hiện thêm 2 câu Xin chào –Admin PC Dev Share. Cũng dễ hiểu và đơn giản ở ví dụ đầu đúng không?!

Ví dụ 2: Thêm kí tự trước phần tử li

Cũng tương tự như đối với ví dụ 1. Ta cũng dễ dàng thêm được kí tự trước li (sắp xếp không thứ tự).

HTML:

<ul>
    <li>Dòng 1</li>
    <li>Dòng 2</li>
    <li>Dòng 3</li>
</ul>

CSS:

ul {
  margin:0;
  padding:0;
}

li {
  list-style:none;
}

li::before {
  content:"+";
  margin-right:10px;
}

Khi đó, ta được kết quả là trước mỗi dòng (li) sẽ có 1 dấu cộng (+).

  • Dòng 1
  • Dòng 2
  • Dòng 3

Ví dụ 3: Thêm kí tự FontAwesome

Như đã biết, chúng ta có 2 cách để thêm 1 kí tự bất kì bên FontAwesome đó là:

  • Chèn trực tiếp dòng <i class=”fa fa-x”></i> (ví dụ như <i class=”fa fa-facebook”></i> sẽ ra kí tự Facebook) vào vị trí cần chèn, trong đó x là mã của kí tự (mã này bạn lấy tại trang chủ FontAwesome mình sẽ không viết chi tiết phần này)
  • Chèn theo 2 thuộc tính ::before và ::after (chính là cách mình sẽ giới thiệu)

Cùng với HTML như ví dụ 2 nhưng thay vì thêm dấu “+” trước mỗi dòng thì ta sẽ thêm bằng 1 kí tự bên FontAwesome đi. Ở đây mình chọn bừa kí tự hình ngôi sao nhé và FontAwesome mình vẫn dùng version 4.7 cho quen thuộc. Mã của hình ngôi sao mình định dùng sẽ là \f006 nhé. Nếu bạn nào chưa biết cách lấy mã từng kí tự như nào thì có thể xem video này mình có tạo trước đây hướng dẫn 1 đứa em (https://youtu.be/-vGZLcI_2Pk)

Lưu ý rằng trong source code của bạn phải có thư viện FontAwesome nữa thì các kí tự mới hiển thị được nhé, không là nó toàn là hình vuông thôi. Nếu chưa thêm thì bạn thêm vào theo cú pháp sau:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

CSS mới:

ul {
  margin:0;
  padding:0;
}

li {
  list-style:none;
}

li::before {
  content:"\f006";
  font-family:FontAwesome;
  margin-right:10px;
}

Kết quả sẽ là:

  • Dòng 1
  • Dòng 2
  • Dòng 3

Bạn có để ý rằng mình vừa thêm 1 thuộc tính nữa vào li::before không? Đó chính là font-family: FontAwesome. Thuộc tính này giúp xác định được loại font mà kí tự đó dùng. Nếu chèn chữ hay số bình thường thì ta không cần, còn riêng đối với các kí tự bên FontAwesome bạn bắt buộc phải thêm font-family: FontAwesome vào nhé.

Ví dụ 4: Tạo Tooltip (chú thích) cho phần tử

Ở ví dụ này ta sẽ được tiếp cận thêm với 2 thuộc tính position liên quan cực kì mật thiết với 2 thuộc tính ::before::after đó chính là position: relativeposition: absolute

  • position: relative – Dùng để thiết lập một phần tử sử dụng các thuộc tính position khác mà không làm ảnh hưởng đến việc hiển thị ban đầu.
  • position: absolute – Dùng để thiết lập vị trí của một phần tử nhưng nó sẽ luôn nằm trong một phần tử mẹ đang là relative.

HTML (mình vẫn dùng từ ví dụ 2 cho các bạn dễ hình dung)

<ul>
    <li>Dòng 1</li>
    <li>Dòng 2</li>
    <li>Dòng 3</li>
</ul>

CSS (sẽ dài hơn khi nãy khá nhiều nhưng bạn chỉ cần để ý đến position là được, còn các thuộc tính các bạn sẽ tự tìm hiểu nhé hoặc mình sẽ có bài viết theo từng thủ thuật ở những bài sau)

ul {
  margin:0;
  padding:0;
  display:inline-block;
}

li {
  list-style:none;
  position:relative;
  padding:1rem;
}

li::before {
  content:"Ví dụ Tooltip";
  position:absolute;
  top:13px;
  left:100%;
  z-index:999;
  background:#333;
  color:#fff;
  min-width:80px;
  display:inline-block;
  font-size:90%;
  padding:3px 10px;
}

li::after {
  content:"";
  position:absolute;
  top:50%;
  left:88%;
  border-width:5px;
  border-style:solid;
  border-color:transparent #333 transparent transparent;
  margin-top:-5px;
  z-index:999;
}

li::before,
li::after {
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
}

li:hover::before,
li:hover::after {
  opacity:1;
  visibility:visible;
}

Kết quả (rê chuột vào từng dòng nhé):

  • Dòng 1
  • Dòng 2
  • Dòng 3

Ở ví dụ này mình vận dụng cả 2 thuộc tính ::before::after cùng lúc, trong đó ::before để tạo hiệu chỉnh cho nội dung tooltip còn ::after để thêm cái tam giác nhỏ cạnh nội dung ấy (rê vào chắc hẳn bạn đã nhìn thấy). Tại đây, bạn tiếp tục để ý giúp mình là ở li có dùng position: relative còn li::beforeli::after mình dùng position: absolute. Bạn cứ hiểu 1 cách đơn giản nhất là nếu không dùng position: relative cho thành phần cha là li thì tooltip sẽ không còn ở vị trí đó đâu mà nó sẽ bay đi chỗ khác ngay (hãy đọc lại tác dụng của 2 position này phía trên nhé).

Lời kết

Vậy là vừa qua 4 ví dụ cơ bản bên trên, mình hi vọng rằng các bạn có 1 cái nhìn bao quát và hiểu thêm được chức năng cũng như cách sử dụng 2 thuộc tính ::before::after như thế nào cho đúng và từ đó có thể tạo ra nhiều hiệu ứng mong muốn. Trong quá trình viết bài, có vài chỗ mình hiểu nhưng khó diễn đạt được sao cho chuẩn nhất và dễ hiểu nhất nên có gì khó hiểu hay chưa rõ thuộc tính nào trong 4 ví dụ trên (nhất là ví dụ 4) thì cứ để lại bình luận, mình sẽ giải đáp sớm nhất có thể nhé.

Created by: PCDevShare.Com

18
Bình luận

avatar
8 Comment threads
10 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
9 Số người bình luận
Cuong NguyenNADNguyễn Lương DuyQuốc Bảo BlogÚt Blog Người mới bình luận
  Đăng kí  
mới nhất cũ nhất nhiều vote nhất
Nhận thông báo từ
Khanh Blogger | 1 comments
Khách
Khanh Blogger | 1 comments

Ngon

Trần Nhật Sinh | 11 comments
Khách
Trần Nhật Sinh | 11 comments

Rất hữu ích đối với một người mới tập tành như e 😁

Gia Huy | 2 comments
Khách
Gia Huy | 2 comments

vjp

Thanh Phú IT | 1 comments
Khách
Thanh Phú IT | 1 comments

hay đó anh

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

ok lắm á anh. em thích cái phần cmt í :p

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

thích ghê á

Út Blog | 1 comments
Khách
Út Blog | 1 comments

Cái comment chất quá anh

Nguyễn Lương Duy | 6 comments
Khách
Nguyễn Lương Duy | 6 comments

Anh Cường qua wp à a

NAD | 5 comments
Khách
NAD | 5 comments

Nay mới biết site mới 😀

NAD | 5 comments
Khách
NAD | 5 comments

Qua say bia ngủ sớm nên dậy sớm :))