Use “literal” device pixels in CSS styling

  Kiến thức lập trình

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?

LEAVE A COMMENT