:target-after
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
:target-after là lớp giả CSS chọn các scroll marker đứng sau scroll marker đang hoạt động (cái hiện tại khớp với :target-current) trong một nhóm scroll marker. Bạn có thể dùng bộ chọn này để tạo kiểu cho các mục điều hướng đứng sau vị trí điều hướng hiện tại trong nhóm scroll marker.
Note:
Lớp giả :target-after chỉ hợp lệ trên các phần tử giả ::scroll-marker và các phần tử đã được chỉ định làm scroll marker thông qua thuộc tính scroll-target-group.
Cú pháp
:target-after {
/* ... */
}
Ví dụ
Tạo kiểu cho các mục điều hướng trước và sau scroll marker đang hoạt động
Trong ví dụ này, chúng ta dùng lớp giả :target-before và :target-after để tô sáng các scroll marker trước và sau cái đang hoạt động, chỉ ra các mục người dùng đã xem và những mục còn lại phía trước.
HTML
Đánh dấu chứa một mục lục được tạo bằng danh sách có thứ tự (<ol>/<li>) và các phần tử <a>. Theo sau đó là một loạt các phần tử <section> chứa nội dung.
<nav id="toc">
<ol>
<li><a href="#intro">Introduction</a></li>
<li><a href="#ch1">Chapter 1</a></li>
<li><a href="#ch2">Chapter 2</a></li>
<li><a href="#ch3">Chapter 3</a></li>
<li><a href="#ch4">Chapter 4</a></li>
</ol>
</nav>
<section id="intro" class="chapter">
<h1>Prose of the century</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
ultricies tellus laoreet sit amet.
</p>
</section>
<section id="ch1" class="chapter">
<h2>Chapter 1</h2>
<!-- ... -->
</section>
<section id="ch2" class="chapter">
<h2>Chapter 2</h2>
<!-- ... -->
</section>
<!-- ... -->
CSS
Chúng ta đặt scroll-target-group: auto trên <ol> để biến nó thành container nhóm scroll marker và để trình duyệt xác định phần tử <a> nào là scroll marker đang hoạt động tại bất kỳ thời điểm nào (tức là liên kết nào có mục tiêu hiện đang trong tầm nhìn). Sau đó chúng ta tạo kiểu cho lớp giả :target-current với màu color red để nó nổi bật rõ ràng.
ol {
scroll-target-group: auto;
}
:target-current {
color: red;
}
Cuối cùng, chúng ta dùng lớp giả :target-before để tạo kiểu cho tất cả các phần tử <a> trước scroll marker đang hoạt động với màu xám và gạch ngang, làm cho chúng trông đã hoàn thành, và chúng ta dùng lớp giả :target-after để tạo kiểu cho tất cả các phần tử <a> sau scroll marker đang hoạt động với đường gạch chân sáng.
a:target-before {
color: gray;
text-decoration: line-through;
}
a:target-after {
text-decoration: underline orange 2px;
}
Kết quả
Hãy thử điều hướng bằng cách nhấp vào các liên kết hoặc cuộn. Trong cả hai trường hợp, bạn sẽ thấy màu văn bản đỏ di chuyển giữa các liên kết để khớp với phần hiện đang trong tầm nhìn. Các liên kết trước và sau liên kết đỏ hiện tại cũng cập nhật để sử dụng các kiểu được định nghĩa trong các quy tắc a:target-before và a:target-after.
Đặc tả
| Thông số kỹ thuật |
|---|
| CSS Overflow Module Level 5 # selectordef-target-after |