Thuộc tính content trong CSS: Hướng dẫn từ A-Z & Ví dụ

Bạn đã bao giờ muốn thêm một icon, một dòng chữ, hay một dấu trích dẫn vào trang web mà không cần sửa đổi HTML chưa? Thuộc tính content trong CSS chính là ‘phép thuật’ giúp bạn làm điều đó. Trong bài hướng dẫn này, WiWeb sẽ cùng bạn tìm hiểu từ A-Z về thuộc tính mạnh mẽ này, từ những khái niệm cơ bản đến các ứng dụng thực tế đầy sáng tạo. Hãy bắt đầu ngay thôi!

Giới thiệu thuộc tính content trong CSS

Để bắt đầu, chúng ta cần hiểu rõ bản chất và vai trò của content trong thế giới CSS. Nó không chỉ là một thuộc tính thông thường, mà là chìa khóa mở ra nhiều kỹ thuật tạo kiểu nâng cao.

Thuộc tính content là gì và tại sao nó quan trọng?

Hiểu đơn giản, thuộc tính content được dùng để chèn nội dung được tạo ra (generated content) vào trang web. Nội dung này không tồn tại trong mã HTML gốc. Thay vào đó, nó được CSS ‘vẽ’ thêm vào, giúp bạn giữ cho cấu trúc HTML của mình luôn sạch sẽ và có ngữ nghĩa.

Sức mạnh của nó nằm ở chỗ:

• Linh hoạt: Dễ dàng thêm các yếu tố trang trí như icon, dấu ngoặc, hay các ký tự đặc biệt.
• Tách biệt: Giữ cho phần nội dung (HTML) và phần trình bày (CSS) hoàn toàn tách biệt. Đây là một nguyên tắc thiết kế web rất tốt.
• Tự động hóa: Có thể tạo ra các bộ đếm hoặc lấy dữ liệu từ thuộc tính HTML để hiển thị, giúp tiết kiệm thời gian.

Mối quan hệ không thể tách rời với pseudo-elements ::before và ::after

Đây là một điểm cực kỳ quan trọng: Thuộc tính content chỉ hoạt động với các pseudo-elements (phần tử giả) như ::before và ::after. Bạn có thể hình dung ::before tạo ra một ‘hộp’ giả ngay trước nội dung thực của một phần tử, còn ::after tạo ra một ‘hộp’ giả ngay sau đó. Thuộc tính content chính là thứ quyết định bên trong chiếc hộp đó sẽ chứa gì. Nếu không có ::before hoặc ::after, content sẽ không có nơi để hiển thị.

Sự khác biệt giữa ::before và :before là gì?

Bạn có thể từng thấy cả hai cách viết này. Vậy chúng khác nhau ra sao?

• :before (một dấu hai chấm): Đây là cú pháp cũ từ CSS2, dùng cho cả pseudo-classes (ví dụ :hover) và pseudo-elements.
• ::before (hai dấu hai chấm): Đây là cú pháp mới được giới thiệu trong CSS3 để phân biệt rõ ràng giữa pseudo-classes (trạng thái của phần tử) và pseudo-elements (một phần của phần tử).

Hãy luôn sử dụng cú pháp hai dấu hai chấm (::before, ::after) để code của bạn rõ ràng, hiện đại và tuân thủ chuẩn mới nhất. Hầu hết các trình duyệt hiện đại đều hiểu cả hai, nhưng việc thống nhất theo chuẩn mới là điều nên làm.

Cú pháp và các giá trị cơ bản của thuộc tính content

Bây giờ, hãy cùng đi sâu vào cách viết và các giá trị thông dụng nhất của content. Nắm vững những điều này là bạn đã có thể bắt đầu tạo ra những thay đổi thú vị trên trang web của mình.

Cú pháp chung và cách sử dụng

Cú pháp rất đơn giản. Bạn chỉ cần chọn một phần tử, gắn pseudo-element ::before hoặc ::after vào, và sau đó khai báo thuộc tính content.

/* Ví dụ: Thêm chữ 'Mới: ' vào trước mỗi sản phẩm có class 'new-product' */
.new-product::before {
  content: "Mới: ";
  font-weight: bold;
  color: red;
}

Giá trị – Chèn văn bản tĩnh

Đây là cách dùng phổ biến nhất. Bạn có thể chèn bất kỳ chuỗi văn bản nào bạn muốn bằng cách đặt nó trong dấu ngoặc kép. Ví dụ trên chính là một minh chứng cho giá trị <string>.

Giá trị open-quote và close-quote – Tạo trích dẫn chuyên nghiệp

Khi bạn muốn tạo kiểu cho các đoạn trích dẫn (<blockquote> hoặc <q>), open-quote và close-quote là những người bạn tuyệt vời. Chúng sẽ tự động chèn các ký tự ngoặc kép phù hợp đã được định nghĩa trong thuộc tính quotes.

blockquote {
  quotes: "«" "»"; /* Định nghĩa kiểu ngoặc kép */
}

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

Cách này giúp trích dẫn của bạn trông chuyên nghiệp và dễ dàng thay đổi kiểu ngoặc kép cho toàn bộ trang web chỉ bằng một dòng CSS.

Giá trị none và normal – Khi nào nên sử dụng?

• content: none;: Giá trị này đảm bảo rằng pseudo-element không hiển thị bất cứ nội dung gì. Nó rất hữu ích khi bạn chỉ muốn dùng ::before hoặc ::after để tạo một hình dạng, một lớp phủ màu mà không cần nội dung.
• content: normal;: Giá trị mặc định. Đối với ::before và ::after, normal cũng tương đương với none. Bạn sẽ ít khi cần phải khai báo giá trị này một cách tường minh.

Mẹo nhỏ: Khi bạn chỉ cần một ‘hộp’ để trang trí (ví dụ, tạo một đường gạch chân hiệu ứng), hãy dùng content: ''; (một chuỗi rỗng). Điều này sẽ tạo ra pseudo-element và bạn có thể bắt đầu tạo kiểu cho nó.

Khám phá các giá trị nâng cao và hàm trong content

Thuộc tính content không chỉ dừng lại ở văn bản tĩnh. Nó còn hỗ trợ các hàm mạnh mẽ, cho phép bạn chèn nội dung động và đa dạng hơn rất nhiều.

Hàm url() – Chèn hình ảnh và tài nguyên ngoài

Hàm url() cho phép bạn chèn một hình ảnh hoặc một tài nguyên bên ngoài vào làm nội dung. Đây là một cách tuyệt vời để thêm các icon nhỏ hoặc dấu đầu dòng tùy chỉnh.

/* Thêm một icon checkmark trước mỗi mục trong danh sách việc cần làm */
.todo-item::before {
  content: url('/icons/checkmark.svg');
  margin-right: 8px;
}

Hàm attr() – Lấy giá trị từ thuộc tính HTML

Đây là một hàm cực kỳ hữu ích! Hàm attr() cho phép bạn lấy giá trị của một thuộc tính bất kỳ trong thẻ HTML và hiển thị nó. Ví dụ kinh điển là tạo tooltip hiển thị nội dung của thuộc tính title hoặc data-*.

<a href="https://wiweb.vn" data-tooltip="Truy cập trang chủ WiWeb">WiWeb</a>

/* Hiển thị tooltip khi hover */
a::after {
  content: attr(data-tooltip);
  /* Thêm các thuộc tính CSS để tạo kiểu và định vị cho tooltip */
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
}

a:hover::after {
  display: block;
}

Hàm counter() và counters() – Tạo bộ đếm tự động

Bạn cần đánh số thứ tự cho các tiêu đề hoặc các mục trong danh sách lồng nhau? CSS Counter chính là giải pháp. Nó hoạt động qua ba bước:

1. counter-reset: Khởi tạo hoặc reset một bộ đếm. Thường đặt ở phần tử cha.
2. counter-increment: Tăng giá trị của bộ đếm. Thường đặt ở chính phần tử bạn muốn đếm.
3. counter() hoặc counters(): Hiển thị giá trị của bộ đếm. Dùng trong thuộc tính content.

/* Đánh số tự động cho các tiêu đề H2 */
body {
  counter-reset: heading-counter; /* Khởi tạo bộ đếm */
}

h2::before {
  counter-increment: heading-counter; /* Tăng bộ đếm mỗi khi gặp H2 */
  content: counter(heading-counter) ". "; /* Hiển thị: "1. ", "2. "... */
}

Hàm counters() phức tạp hơn một chút, thường dùng cho các danh sách có nhiều cấp (nested lists).

Ứng dụng thực tế: Biến lý thuyết thành sản phẩm

Lý thuyết là vậy, nhưng sức mạnh thực sự của content thể hiện qua các ứng dụng thực tế. Dưới đây là một vài ví dụ phổ biến mà WiWeb tin rằng bạn sẽ thường xuyên sử dụng.

Cách thêm một biểu tượng vào trước/sau văn bản (Font Awesome, SVG)

Đây là một trong những cách dùng thuộc tính content phổ biến nhất. Để thêm icon từ thư viện Font Awesome, bạn chỉ cần dùng content với mã Unicode của icon đó.

/* Thêm icon mũi tên vào link ngoài */
a[target="_blank"]::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f35d"; /* Mã Unicode của icon external-link-alt */
  margin-left: 5px;
}

Tạo Tooltip đơn giản chỉ bằng CSS

Như ví dụ với hàm attr() ở trên, bạn có thể tạo một tooltip hoàn chỉnh mà không cần JavaScript. Bằng cách kết hợp content: attr(data-tooltip); với các thuộc tính position, opacity và transition, bạn có thể tạo ra những tooltip mượt mà và đẹp mắt.

Tùy chỉnh dấu đầu dòng cho danh sách (custom list bullets)

Bạn chán ngấy với dấu chấm tròn mặc định của thẻ <li>? Hãy tự tạo dấu đầu dòng của riêng mình!

ul {
  list-style-type: none; /* Ẩn dấu đầu dòng mặc định */
  padding-left: 0;
}

li::before {
  content: '→'; /* Hoặc bất kỳ ký tự nào bạn thích */
  margin-right: 10px;
  color: #007bff;
}

Xây dựng Breadcrumbs với dấu phân cách tự động

Breadcrumbs (thanh điều hướng chỉ vị trí) thường có các dấu phân cách (>, /, →) giữa các mục. Thay vì thêm chúng vào HTML, hãy để CSS tự làm việc đó.

.breadcrumb li:not(:first-child)::before {
  content: '>';
  margin: 0 10px;
  color: #6c757d;
}

Cách này cực kỳ hiệu quả, dấu phân cách sẽ tự động được thêm vào tất cả các mục trừ mục đầu tiên.

Đánh số thứ tự cho các tiêu đề (Heading Numbering)

Chúng ta đã đề cập đến CSS Counter ở trên. Đây là một ứng dụng tuyệt vời để tự động đánh số các chương, mục trong một bài viết dài hoặc tài liệu kỹ thuật, giúp người đọc dễ dàng theo dõi cấu trúc nội dung.

Khả năng tương thích trình duyệt (Browser Compatibility)

Bạn có thể hoàn toàn yên tâm khi sử dụng thuộc tính content và các pseudo-elements ::before, ::after. Chúng được hỗ trợ bởi tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari, Edge.

Các giá trị cơ bản như <string>, url(), attr() hoạt động rất ổn định. Các hàm nâng cao như counter() cũng có độ tương thích rất cao. Vấn đề chỉ có thể xảy ra với các trình duyệt rất cũ như Internet Explorer phiên bản 8 trở về trước, nhưng đây không còn là mối bận tâm lớn trong phát triển web hiện nay.

Lời kết

Qua bài viết này, WiWeb hy vọng bạn đã có một cái nhìn toàn diện và sâu sắc về thuộc tính content trong CSS. Nó không chỉ là một công cụ để chèn nội dung đơn giản, mà còn là một kỹ thuật mạnh mẽ giúp bạn viết CSS hiệu quả, linh hoạt và giữ cho mã HTML luôn tinh gọn.

Từ việc thêm một icon nhỏ đến việc xây dựng hệ thống đánh số tự động, tất cả đều nằm trong tầm tay bạn. Bạn còn ý tưởng sáng tạo nào khác để ứng dụng thuộc tính này không? Hãy chia sẻ với chúng tôi bằng cách để lại bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp, giúp bạn xây dựng một thương hiệu vững mạnh trên nền tảng số, WiWeb luôn sẵn sàng đồng hành. Liên hệ với chúng tôi để được tư vấn ngay hôm nay!