[csswg-drafts] [css-pseudo] Allow outline/box-shadow on highlight pseudo-elements (#13192)

nicolo-ribaudo has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo] Allow outline/box-shadow on highlight pseudo-elements ==
**Use case**: Allow defining some "padding" within between the highlight rectangle and text it contains.

Example (all built using `<span>` elements rather than highlight pseudo-elements):

<img width="492" height="154" alt="Image" src="https://github.com/user-attachments/assets/890aca05-f750-4e01-b8b6-9f01a0a5f18e" />

- The first one only has a background color
- The second example has background color, and one of the following:
  - `margin: -10px; padding: 10px;`
  - `outline: var(--background-color) 10px solid;`
  - `box-shadow: 0px 0px 0px 10px var(--background-color);`

Some real-world use cases are:
- In the ECMAScript spec, when you click on a variable (for example, `argument` at https://tc39.es/ecma262/#sec-toboolean), it will highlight all the occurrences of that variable adding a 4px offset
  <img width="340" height="135" alt="Image" src="https://github.com/user-attachments/assets/c614dc90-a4bc-45b5-a9f6-70cb66ecd0fd" />
- In PDF.js, the library used by Firefox to render PDF files, search results (Ctrl+F in a PDF in firefox) have a 1px offset:
  <img width="227" height="133" alt="Image" src="https://github.com/user-attachments/assets/f31e9b31-d59c-4581-8ce8-349ea24bd757" />

It'd be great if both these use cases could be handled by the CSS highlight API. Especially the PDF.js one, which has to dynamically inject `<span>`s in the text to highlight the right words.

The margin+padding trick cannot work with highlight pseudo-elements because they would potentially affect layout. However, both `box-shadow` and `outline` are two ways of obtaining the same effect that do not affect layout.

Both the ECMAScript spec and PDF.js would also need `border-radius` support to get the same exact visual behavior, but having just the "padding" would already be a big step forward.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13192 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 8 December 2025 17:40:53 UTC