[csswg-drafts] Add a `::interest-hint` pseudo element to interest invokers (#12437)

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

== Add a `::interest-hint` pseudo element to interest invokers ==
This idea was added to the [OpenUI explainer](https://open-ui.org/components/interest-invokers.explainer/#option-35---add-an-opt-in-info-button-pseudo-element) recently, as the result of a great discussion with developers at CSS Day. This is primarily a way to provide developers more options for touchscreen users, but it also seems to be a useful idea on its own, even for non-touchscreen interfaces.

The idea is that any element with `interestfor` can spawn a pseudo element (nominally called `::interest-hint`) which is a button that comes after the interest invoker in layout order. Tapping (note: tapping, not hovering) that pseudo element button will trigger interest in the originating element. The typical appearance is something like the (i) icon in this screenshot:

![Image](https://github.com/user-attachments/assets/bfb88386-8c4d-4cda-8db9-1fc6f1adc801)

This pseudo element could be used on its own to always generate such an icon. In that case, hovering, focusing, or long-pressing the *originating* element will trigger interest, but so, too, will *clicking/tapping* the (i) icon.

If ["option 3"](https://open-ui.org/components/interest-invokers.explainer/#option-3---add-an-item-to-the-context-menu) emerges as the final touchscreen solution (which seems the most likely outcome to me at this point, given all of the discussion), then this new `::interest-hint` pseudo could be used to make some/all interest invokers easier to invoke for touchscreens only, via:

```css
@media (any-pointer: coarse) {
  /* On touch devices, show the extra pseudo element button */
  .my-link::interest-hint {
    content: '' / 'profile preview';
    background-image: url('icon.png');
  }
}
``` 

In that scenario (option 3 plus `::interest-hint`), the user can still long-press the originating element itself and choose "view more info" from the context menu, **or** they can just tap the (i) icon to go directly to showing interest. However, for developers who would prefer less "clutter" in their UI, they do not have to use `::interest-hint` and their users will still have access to the content via the context menu.

Open questions that I can think of:
- Is this a good idea?
- What should the pseudo element be called?
- It should be a tree-abiding pseudo element, correct?
- Where does it live in the layout tree, relative to e.g. `::after` and others?
- Should there be a way to put it *before* the originating element also?
- Should hovering, focusing, or long-pressing the pseudo element *also* show interest in the originating element? (Seems a bit confusing to me, but maybe?)


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


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

Received on Wednesday, 2 July 2025 20:56:16 UTC