Use ::target-text to Locate the Position of '#:~:text=' in the URL

We can see that the URL of some web pages is followed by a: #:~:text=content. Today we will talk about what this is for.

It is a new feature of current browsers. Using it the browser will automatically scroll to the corresponding content position. It is similar to anchor positioning before. Anchor positioning: target must require the page to contain the element with the id of the target. If it doesn't exist, there is no way to locate it. In order to solve this problem, ::target-text appeared!

Grammar

Simply specifying a small text is prone to inaccurate positioning (too easy to repeat). To solve this problem, there are two options.

Although option 1 is feasible, it also has problems. One is that the address bar is too long and not very beautiful, and the other is that I only need to share this small piece of content and don't need that much.

Now let's look at option two. Here is a brief introduction to the complete syntax of :~:text.

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Syntactically, only textStart is required, the others are optional. However, it should be noted that if multiple pieces of text can be matched, the first matching text will be located.

Style

In CSS, ::target-text can be used to style this section to highlight scroll-to-text. An example is as follows. However, it supports a limited number of styles. ::target-text is similar to ::selection, only supporting text-related styles.

::target-text {
  background-color: rebeccapurple;
  color: white;
}

Browsers Compatibility

We can see the specific compatibility information on the MDN official website, which requires Chrome 89+ or above.

Summary

Through this article, you should be able to understand what ::target-text is.