Pseudoelement CSS ::target-text

> Dodaj do ulubionych

Pseudoelement CSS ::target-text reprezentuje tekst znaleziony przez przeglądarkę na stronie na podstawie fragmentu adresu URL.

Fragment adresu URL to część adresu URL wskazująca pewne słowo, do którego prowadzi znajdujące się na stronie łącze. Kiedy przeglądarka znajdzie to słowo i do niego przewinie stronę, zostanie one sformatowane zgodnie z ustawieniami pseudoelementu ::target-text.

Przykład

W tym przykładzie, jeśli użytkownik kliknie odnośnik tutaj, przeglądarka przewinie stronę do pierwszego znalezionego słowa fugia i nada mu czerwony kolor zgodnie z ustawieniami pseudoelementu ::target-text:


<style>
  ::target-text {color: red;}
</style>
...
<p>…kliknij <a href="#:~:text=fugia">tutaj</a>…</p>
...
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugia eu.</p>
...

Efekt:

Efekt zastosowania pseudoelementu ::target-text

Składnia

Składnia pseudoelementu ::target-text:

::target-text {color: red;}