Re: [csswg-drafts] Add an `::interest-button` pseudo element to interest invokers (#12437)

Hearing no input, I'd like to propose answers to the questions above:


> * What should the UA stylesheet rule be?

I'd propose this:

```css
[interestfor]::interest-button {
  content: "?";
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 0.5em;
  color: inherit;
  background-color: transparent;
  padding-block: 0.25em;
  padding-inline: 0.5em;
  min-block-size: max(24px, 1lh);
  min-inline-size: 24px;
  text-align: center;
  margin-inline-start: 0.5em;
  user-select: none;
  cursor: help;
}

[interestfor]::interest-button:hover {
  background-color: color-mix(in lab, currentColor 10%, transparent);
}
[interestfor]::interest-button:active {
  background-color: color-mix(in lab, currentColor 20%, transparent);
}
```

That uses `"?"` as the default (opt-out) content value, and roughly copies [button styles from css-forms-1](https://www.w3.org/TR/css-forms-1/#stylesheet-select-button). Plus some left margin to separate it from the originating element, and `cursor:help` because that seems to make a lot of sense here.

Thoughts very much appreciated.

> * Styling - like an appearance:base button?

Yes, see above.

> * Where in the pseudo element list does this one go? After the element, before `::after`?

I'm still in favor of putting this pseudo just *after* the `::after` pseudo, which [matches the spec's placement](https://drafts.csswg.org/css-forms-1/#picker-icon:~:text=after%20any%20boxes%20generated%20by%20the%20%3A%3Aafter%20pseudo%2Delement) of the `::picker-icon` pseudo. Some comments about this are [here](https://github.com/w3c/csswg-drafts/issues/12437#issuecomment-3130188021) and [here](https://github.com/w3c/csswg-drafts/issues/12437#issuecomment-3137010281). Here's a quick visual mockup of a button and a link, both using both `::interest-button` *and* `::after`. (The `(i)` represents the `::interest-button` and the picker icon or "link out" icon represent the `::after`.) They seem to make a lot more sense to me in Scenario A. But again, input appreciated.

<img width="539" height="354" alt="Image" src="https://github.com/user-attachments/assets/369f3cc4-6c7c-459f-86db-b013367ee540" />

@jakearchibald because you've been super helpful with `popover=hint` and this is in the same neighborhood.

-- 
GitHub Notification of comment by mfreed7
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12437#issuecomment-4316246202 using your GitHub account


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

Received on Friday, 24 April 2026 20:43:36 UTC