CSS :: before và :: after trong CSS

CSS :: before và :: after trong CSS

Rate this post

Selector CSS :: before chèn nội dung trước một phần tử được chọn. CSS: sau khi chèn nội dung vào sau một phần tử được chỉ định. Các bộ chọn này thường được sử dụng để thêm văn bản vào trước hoặc sau một đoạn văn hoặc một liên kết.

Khi bạn đang thiết kế website, bạn có thể có ý định thêm một phần nội dung vào phía trước hoặc phía sau nội dung của một phần tử.

Các bài viết liên quan:

Ví dụ: bạn có thể muốn thêm một hình ảnh trước mỗi dấu đầu dòng trong danh sách.

Đó là nơi CSS :: before và :: after, pseudo-elements(phần tử giả) xuất hiện. Những pseudo-elements(phần tử giả) này cho phép bạn chèn nội dung vào trước hoặc sau nội dung của một phần tử.

Hướng dẫn này sẽ thảo luận, có tham chiếu đến các ví dụ, cách sử dụng pseudo-elements(phần tử giả) :: before và :: after để trang trí nội dung trên trang web. Khi đọc xong hướng dẫn này, bạn sẽ trở thành một chuyên gia trong việc sử dụng pseudo-elements(phần tử giả) :: before và :: after trong CSS.

pseudo-elements(phần tử giả) CSS

pseudo-elements(phần tử giả) là một từ code css đặc biệt, cho phép bạn tạo style css cho một tử cụ thể trong selector CSS. Chúng tôi sẽ đề cập đến pseudo-elements(phần tử giả) là bộ chọn trong suốt bài viết này vì mọi pseudo-elements(phần tử giả) đều là một bộ chọn.

pseudo-elements(phần tử giả) rất hữu ích khi bạn muốn áp dụng kiểu cho một phần tử mà không cần thêm bất kỳ lớp CSS hoặc ID nào vào phần tử. Ví dụ: nếu bạn muốn thêm mũi tên “>” sau mỗi liên kết trên trang web, bạn có thể sử dụng pseudo-elements(phần tử giả).

CSS cung cấp một loạt các yếu tố pseudo-elements. Chúng bao gồm :: first-line, :: first-letter, :: before và :: after. Với mục đích của hướng dẫn này, chúng tôi sẽ tập trung vào hai điều cuối cùng: :: before và :: after.

pseudo-elements(phần tử giả) thường được biểu diễn bằng dấu hai chấm kép (: :). Mặc dù CSS3 không hỗ trợ sử dụng cú pháp dấu hai chấm (:) để khai báo pseudo-elements(phần tử giả), nhưng cách sử dụng ký hiệu hai dấu hai chấm là phương pháp hay nhất.

Ký hiệu hai dấu hai chấm được dùng để phân biệt pseudo-classes với pseudo-elements(phần tử giả).

CSS :: before Pseudo-Element

Phần tử :: before pseudo-element thêm nội dung xuất hiện trước phần tử trên trang web. Thông thường, phần tử này được sử dụng để thêm văn bản vào trước một đoạn văn.

Cú pháp của :: before pseudo-elements(phần tử giả) là:

selector::before {
	// CSS rules
}

Selector :: before được thêm vào sau tên của phần tử mà bạn muốn áp dụng bộ chọn.

Dưới đây là các thành phần chính của :: before pseudo-element:

  • Selector đề cập đến bộ chọn mà :: before nên được áp dụng. Vì vậy, nếu bạn muốn áp dụng phần tử :: before cho mọi thẻ “a”, bộ chọn của bạn sẽ là “a”. Hoặc nếu bạn muốn áp dụng phần tử :: before trước mỗi phần tử có tên class là “link”, bạn sẽ sử dụng bộ chọn “.link”.
  • :: before yêu cầu trình duyệt thêm nội dung của các quy tắc CSS vào trước bộ chọn.
  • Quy tắc CSS là các quy tắc nên được áp dụng trước bộ chọn.

Nếu bạn muốn tìm hiểu thêm về cách bộ chọn hoạt động trong CSS, hãy đọc hướng dẫn của chúng tôi về bộ chọn CSS.

Hãy xem qua một ví dụ để chứng minh cách hoạt động của phần tử :: before pseudo.

:: before CSS Ví dụ

Giả sử chúng ta muốn thêm một biểu tượng cảm xúc liên kết (🔗) trước mỗi liên kết trên một trang web mẫu. Chúng tôi có thể hoàn thành nhiệm vụ này bằng cách sử dụng mã sau:

<a href="https://websitehcm.com">Before after a tag.</a>

styles.css

a::before {
	content: "🔗";
}

Trong tệp HTML của mình, chúng tôi đã xác định một thẻ HTML <a> liên kết đến trang chủ websitehcm. Sau đó, trong tệp CSS của chúng tôi, chúng tôi đã sử dụng pseudo-elements(phần tử giả) :: before để thêm biểu tượng cảm xúc liên kết trước mỗi thẻ <a> trên trang web của chúng tôi.

Chúng tôi đã hoàn thành điều này bằng cách chỉ định một thuộc tính nội dung trong tệp CSS của chúng tôi, trông giống như sau:

content: "🔗";

Quy tắc của chúng tôi đã thêm biểu tượng cảm xúc liên kết vào đầu thẻ <a> mà chúng tôi đã tạo.

Giá trị cho thuộc tính “content” có thể là:

  • Một chuỗi, chẳng hạn như “Đây là một chuỗi.”.
  • Một bộ đếm, chẳng hạn như “bộ đếm (li);”.
  • Hình ảnh, chẳng hạn như “url (/path/to/image.png)”.
  • Một chuỗi trống, chẳng hạn như “”.

Bạn không thể chèn một phần tử HTML vào thuộc tính content.

CSS :: after Pseudo-Element

CSS :: after pseudo-element cho phép thêm nội dung ngay sau một phần tử trên trang web. Giống như bộ chọn :: before, :: after thường được sử dụng với các liên kết hoặc đoạn văn bản.

Cú pháp của phần tử :: after pseudo như sau:

selector::after {
	// CSS rules
}

Cú pháp cho :: after giống như cú pháp cho pseudo-elements(phần tử giả) :: before. :: after khi chấp nhận các giá trị tương tự cho thuộc tính “content” mà chúng ta đã thảo luận trước đó.

:: after CSS Ví dụ

Giả sử chúng ta đang thiết kế một phần tử liên kết trên trang web cho một tiệm bánh có tên là Hansons Bakery. Liên kết này sẽ hiển thị dòng chữ “Truy cập trang chủ Hansons Bakery.” Liên kết của chúng ta phải được bao quanh bởi một đường viền đen đặc rộng 1px.

Sau nhãn của chúng tôi, chúng tôi muốn một hộp văn bản xuất hiện với nội dung Trang này hiển thị menu đồ nướng của chúng tôi. (Chú ý khoảng trắng trước từ “Cái này”.) Hộp của chúng ta phải có màu nền HTML màu cam.

<a href="/" class="label">Trang chủ.</a>
styles.css

.label {
	border: 1px solid black;
}

.label::after {
	content: " Trang hiển thị trang chủ của chúng tôi";
	background-color: orange;
}

Trong code của chúng tôi, chúng tôi đã xác định một liên kết đến trang chủ của mình bằng thẻ <a>. Tên lớp được liên kết với liên kết của chúng tôi là .label.

Trong tệp CSS của chúng tôi, chúng tôi đã áp dụng một đường viền đen đặc rộng 1px xung quanh mọi phần tử với tên lớp .label.

Sau đó, chúng tôi sử dụng bộ selector:: after để tạo hộp văn bản mà chúng tôi đã mô tả trước đó. Hộp văn bản hiển thị nội dung “Trang hiển thị trang chủ của chúng tôi.” Hộp của chúng tôi có nền màu cam.

Phần kết luận

pseudo-elements(phần tử giả) :: before và :: after cho phép bạn thêm nội dung vào một phần cụ thể của phần tử bạn đã chọn trong quy tắc CSS. Ví dụ: bộ chọn :: before có thể được sử dụng để thêm văn bản vào trước một liên kết. Bộ chọn :: after có thể được sử dụng để thêm biểu tượng cảm xúc vào sau một đoạn văn bản.

Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, khái niệm cơ bản về pseudo-elements(phần tử giả) trong CSS và cách sử dụng :: before và :: after pseudo-elements(phần tử giả). Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng pseudo-elements(phần tử giả) :: before và :: after trong mã CSS của mình như một nhà thiết kế web chuyên nghiệp.

Để được tư vấn về các tài nguyên học tập, sách và khóa học dành cho nhà phát triển web CSS hàng đầu, hãy xem hướng dẫn Cách học CSS của chúng tôi.

Leave a Reply