Rate this post

Selector CSS :: before chèn nội dung trước một phần tử được chọn. CSS: after 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ử.

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.

Xem thêm Tìm hiểu tấn công Execution After Redirect (EAR)

Tóm tắt nội dung

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ả).

Xem thêm Kiểm tra lỗ hổng bảo mật CSS Injection

Tại sao sử dụng pseudo-elements(phần tử giả) CSS

Pseudo-elements (phần tử giả) trong CSS được sử dụng để tạo ra các phần tử mới mà không cần thêm bất kỳ phần tử HTML nào. Điều này cho phép bạn tái sử dụng các kiểu của một phần tử, hoặc thêm các phần tử giả vào trong một phần tử để tạo ra một giao diện hoàn chỉnh và đẹp mắt.

Ví dụ, sử dụng pseudo-elements ::before và ::after cho phép bạn thêm nội dung vào trước hoặc sau một phần tử chính, hoặc sử dụng pseudo-elements ::first-letter để tạo ra các kiểu cho chữ đầu tiên của một đoạn văn bản.

Trong tổng quan, sử dụng pseudo-elements trong CSS giúp bạn tạo ra một giao diện đẹp và chuyên nghiệp mà không cần sử dụng bất kỳ phần tử HTML nào thêm vào. Điều này giúp giảm kích thước của tập tin HTML và giảm sự phức tạp của mã HTML.

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.

Xem thêm CSS là gì? cách hoạt động và cách học CSS

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.

Xem thêm Trường hợp SEO cho trang web kiến trúc

Các câu hỏi phổ biến về CSS :: before và :: after

Đây là một số câu hỏi phổ biến về CSS :: before và :: after:

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

CSS :: before và :: after là các pseudo-elements được sử dụng để thêm nội dung vào phần tử được chọn. Chúng cho phép bạn chèn nội dung vào trước hoặc sau phần tử được chọn mà không thay đổi HTML của phần tử đó.

Làm thế nào để sử dụng CSS :: before và :: after?

Để sử dụng CSS :: before và :: after, bạn cần xác định các quy tắc CSS cho các pseudo-elements này và sử dụng thuộc tính content để định nghĩa nội dung của chúng. Ví dụ:

h1::before {
    content: ">>";
}

Trong ví dụ này, các ký tự “>>” sẽ được chèn vào trước các tiêu đề h1.

Làm thế nào để tạo một mũi tên bằng CSS :: before và :: after?

Để tạo một mũi tên bằng CSS :: before và :: after, bạn có thể sử dụng thuộc tính border để tạo mũi tên, sau đó sử dụng transform để xoay nó. Ví dụ:

.arrow::before {
    content: "";
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

Trong ví dụ này, các thuộc tính border và border-width được sử dụng để tạo mũi tên, sau đó transform được sử dụng để xoay mũi tên.

Làm thế nào để tạo hình tròn bằng CSS :: before và :: after?

Để tạo hình tròn bằng CSS :: before và :: after, bạn có thể sử dụng thuộc tính border-radius và kích thước để tạo hình tròn. Ví dụ:

.circle::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
}

Trong ví dụ này, thuộc tính width và height được đặt để tạo một hình tròn có kích thước 20x20px, và border-radius được sử dụng để làm tròn cạnh của hình tròn.

Làm thế nào để tạo hiệu ứng hover cho CSS :: before và :: after?

Để tạo hiệu ứng hover cho CSS :: before và :: after, bạn có thể sử dụng các quy tắc CSS :hover để thay đổi thuộc tính của các pseudo-elements. Ví dụ:

.circle::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
}

.circle:hover::before {
    background-color: red;
}

Trong ví dụ này, khi trỏ chuột vào phần tử có class là “circle”, background-color của pseudo-element ::before sẽ thay đổi thành màu đỏ.

CSS :: before và :: after có hỗ trợ các thuộc tính khác nhau so với các phần tử thực sự không?

Có, CSS :: before và :: after không hỗ trợ tất cả các thuộc tính của phần tử thực sự. Ví dụ, chúng không có chiều cao và chiều rộng mặc định, và không thể chứa các phần tử con. Tuy nhiên, chúng có thể sử dụng các thuộc tính như margin, padding, border, background-color và color để tạo ra các hiệu ứng thú vị.

CSS :: before và :: after có thể được sử dụng để thay đổi hình dạng của phần tử được chọn không?

Không, CSS :: before và :: after không thể được sử dụng để thay đổi hình dạng của phần tử được chọn. Chúng chỉ cho phép bạn thêm nội dung vào trước hoặc sau phần tử được chọn mà không thay đổi HTML của phần tử đó. Để thay đổi hình dạng của phần tử, bạn cần sử dụng các thuộc tính như border-radius, transform và clip-path.

Làm thế nào để đặt các pseudo-element :: before và :: after vào vị trí chính xác trên phần tử được chọn?

Các pseudo-element :: before và :: after được đặt bằng cách sử dụng các thuộc tính position, top, left, right và bottom. Ví dụ:

.box::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    background-color: black;
}

.box::after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: black;
}

Trong ví dụ này, pseudo-element ::before được đặt ở vị trí (10px, 10px) từ phía trên cùng bên trái của phần tử có class “box”, trong khi pseudo-element ::after được đặt ở vị trí (10px, 10px) từ phía dưới cùng bên phải của phần tử đó.

CSS :: before và :: after có thể được sử dụng để tạo ra các hiệu ứng hover không?

Có, pseudo-element ::before và ::after có thể được sử dụng để tạo ra các hiệu ứng hover cho phần tử được chọn. Ví dụ:

.box::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
}

.box:hover::before {
    background-color: red;
    transform: scale(1.5);
}

Trong ví dụ này, khi trỏ chuột vào phần tử có class “box”, background-color của pseudo-element ::before sẽ thay đổi thành màu đỏ và pseudo-element sẽ được thu nhỏ lại bằng cách sử dụng thuộc tính transform.

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.

Xem thêm Selenium IDE- xác định phần tử html cho testing website

CSS, Html

CSS :: before và :: after trong CSS