Forum Bugs

Linear gradients with currentColor

pepelsbey
There’s a trick for underlining links using linear gradients and currentColor:

color:red;
background:
	linear-gradient(
		to top,
		currentColor 0.09em,
		transparent 0.09em)
	repeat-x;


And this supposed to work this way (screen shot from Blink)

blink.png


But Prince prints it like this:

prince.png


See the full example attached.
  1. blink.png17.4 kB
    Result in Blink
  2. index.html0.3 kB
  3. prince.png18.3 kB
    Result in Prince
pepelsbey
Suddenly it’s a duplicate of the bug report I filed more than a year ago. Sorry.
mikeday
Ingenious hack, but why not just use text-underline-style? :)
pepelsbey
@mikeday, because it’s Firefox/Safari only thing so far

Screen Shot 2015-11-18 at 15.23.32.png
  1. Screen Shot 2015-11-18 at 15.23.32.png128.2 kB
mikeday
Oh I see. At least you can use it in Prince! :)
maddesigns
mikeday
No, you would have to use border-bottom if you want a lower underline.