On a device with a high DPI monitor, I like the way the following CSS styles
links on my page:
a {
text-decoration: underline solid currentcolor 0.5px;
}
a:hover {
text-decoration: underline solid currentcolor 1px;
}
Because the device scaling factor is 2, this renders the underline below the
link with a thickness of 1 literal pixel normally and 2 literal pixels
when hovered.
However, on a normal 1080p monitor, 0.5px
rounds up to 1 literal pixel, and
hovering has no visual effect.
Instead, I want to make a CSS rule that says, “Display the underline as the
thinnest displayable thickness by default, and make it 1 device pixel thicker
when hovered.” Is this possible?