Styjun

I'm working on a website that includes a lot of anchor links, some of which are a different colour to the text itself. This hasn't been a problem for 90% of development and I went forward with standard text decoration for regular links and background-image with a linear-gradient for the coloured links so I could animate them into highlighting

I noticed that those coloured links weren't working at all on mobile though. Sure, no problem, I'll try another method. I tried a lot of methods.

The first was switching everything up to border-outline and this is when I realised that I liked the thicker line on the regular links. Unfortunately this didn't work because the links are inline in paragraphs and changing the line-height (I used that to change how far the underline is beneath the text) broke the paragraphs.

What I'm currently trying is bringing in a 1x2 pixel image and using that as the background image with repeat-x and it looks great! On desktop. Neither Chrome nor Firefox for mobile (the ones I've tried) even show the underline.

I've put in all of the media queries already and adjusted this stuff for each size screen, but still no luck

TL;DR - I'm using a background image to underline text and it's great on desktop but doesn't show at all on mobile. Any advice or tips on an underlining method that will for sure work?

Here's the underlining code I'm using:

 a 
 color: var(--font-color-main);

 text-decoration: none;
 background-image: url('../assets/blackunderline2.png');
 background-position: 0 22px;
 background-repeat: repeat-x;
 

And here's what I'm using on the coloured highlights (also doesn't work on mobile, and I am happy to switch this to the pixel approach if that works!)

/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
/* Firefox 3.6 - 15 */
/* Opera 11.1 - 12 */
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(80%, orange), color-stop(90%, transparent));
 background-image: linear-gradient(orange 80%, transparent 90%);
 background-image: linear-gradient(orange 80%, transparent 90%);
 background-position: 0 1.04em;
 background-repeat: repeat-x;
 background-size: 7px 8px;

So I hooked my phone up to the dev tools on my development PC and found out that (for reasons I'm unsure of right now) the line height was changing on mobile only despite the desktop media queries being fine.

This meant that the underlining I was doing with the background image was too low to be visible so I shifted it up and now we're golden!