How to link to any text on a page
Text fragments allow linking to any text on a page, not limited to <a name="anchorname">
anchors or elements with an id="anchorname"
attribute.
To achieve this it introduces the special #:~:text=...
prefix which browsers recognize and navigate to the text on a page.
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
The simplest case is to just use textStart:
https://blog.x-way.org/Misc/2024/12/27/Scheduled-Screenshots.html#:~:text=GitHub%20Action
By using the textEnd we can link to a whole section of a text:
https://blog.x-way.org/Misc/2024/12/27/Scheduled-Screenshots.html#:~:text=steps,per%20month
And with prefix- and -suffix we can further control the exact location when there are multiple matches:
https://blog.x-way.org/Misc/2024/12/27/Scheduled-Screenshots.html#:~:text=blog-,screenshots
https://blog.x-way.org/Misc/2024/12/27/Scheduled-Screenshots.html#:~:text=screenshots,-repo
There is also a corresponding CSS pseudo-element which can be used to style the linked to text fragment on a page:
::target-text { background-color: red; }
(via)