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

Alright, thanks for the very helpful [conversation](https://github.com/w3c/csswg-drafts/issues/12437#issuecomment-4354054738) this morning. Based on that, I updated the proposed UA stylesheet a bit, and prototyped it in Chromium. Here's the updated stylesheet first:

```css
[interestfor]::interest-button {
  content: '\24D8' / '';
  display: inline-block;
  color: inherit;
  background-color: transparent;
  box-sizing: border-box;
  margin-inline-start: 0.25em;
  min-block-size: max(24px, 1lh);
  min-inline-size: 24px;
  text-align: center;
  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);
}
```

Notable changes/comments:
- I took @fantasai 's suggestion to change from `?` to `\24D8` as the `content` value. That looks better and nicely side-steps the questions about how to draw a circle around it. Plus the developer hassles of removing that circle if desired.
- I got rid of the border.
- I cleaned up some of the padding.
- The `min-*-size` values work nicely to pad the interest button, but they do make the `<button>` itself have some extra padding on the bottom. Not sure much can be done about that.
- I also toyed with changing the `font-size` for the pseudo (e.g. `1.2em`) but I don't think that added much, and it's one more rule to override, so I removed it.

Suggestions for improvement are appreciated!

The Chromium changes haven't landed yet, so you can't exactly try this just yet (likely by Monday) but for when that's available, here's a test page:

- https://jsbin.com/fizotey/edit?html,output

And as requested, here are some screenshots of what that looks like. Note that the demo site does not change the styles for either `<button>` or `<a>`, so this is how things will look "stock":

<img width="948" height="736" alt="Image" src="https://github.com/user-attachments/assets/cf7eb4cb-2fcd-44cc-a9e1-484308c22bab" />

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


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

Received on Thursday, 30 April 2026 21:55:08 UTC