CSS: Box shadow link underline has left or right line on mobile

[Marliese]

Hey there,

I’m using this code to create a box-shadow link underline a:

.single-post .the-content p a {
color: #333;
box-shadow: inset 0 -4px 0 0 #e31a4b;
padding: .25em 0em .25em 0em;
text-decoration: none;
transition: all .1s ease;}

Now, it looks fine, but on mobile Chrome f.e. with iPhone X I get a fine, pinkish line. It looks like this: https://imgur.com/bZlNsmu

Any idea why this might be happening? It’s fine on Firefox ….

[Beverleyh]

I think it’s to do with higher pixel density of that device screen; some of the box-shadow is bleeding out a smidge, even though the horizontal offset is 0. It’s not a pixel, so it isn’t perceptible on standard/non-retina screens, but it is visible on high def stuff. I’ve seen it before on a tree menu I was building and the only way I found to hide it was with a 1 pixel wide pseudo element positioned over the top to cover it. The background-color of the pseudo element matched the background of the web page. Hopefully this gives you an idea to fix this here too.

[Marliese]

Hey there! Ceck the imgur image. The screenshot. Look at the very end of “Lichtfeld-“. Behind the “-” there is a thin,fine pink link to the right which is not supposed to be there and not specificed in the css. Why is that happening?

[Beverleyh]

I was editing the post when you replied – please recheck above.

[Marliese]

Ah, thanks! That is interesting. Sadly, I have no idea how to do this. I think I may go back to standard links then.

[Beverleyh]

I can just about see the extra vertical line(s) in this CodePen demo if I fiddle with the zoom here (I see one on the left and right), but this is the sort of thing I mean by using pseudo elements to cover them https://codepen.io/anon/pen/zMaOew

I’ve made them aqua so you can see where they are, but really they would match the web page background.

Move them left/right by changing the value of right:-1.5px; and left:-1.5px; until the thin vertical lines from the box-shadow are covered.

[Marliese]

Thank you! I tried to add it to my code like this:

.single-post .the-content p a:before, a:after {
content:’ ‘;
display:block;
position:absolute;
z-index:1;
top:0;
right:-1.5px;
width:2px;
height:100%;
background:aqua;
}
.single-post .the-content p a:before {
right:auto;
left:-1.5px;
}

The weird thing is, everything gets the blue lines now … except the links! :D

[Beverleyh]

You’ve missed changing the a:after selectors too in the first line. It’s separated from a:before with a comma.

[Marliese]

Sorry, I don’t get it. How are they supposed to look? I thought a:after is the correct general selector?

[Beverleyh]

Using your own code as an example…

.single-post .the-content p a:before, .single-post .the-content p a:after {

I thought a:after is the correct general selector?

Yes, for all links, but it looks like you only want to target links within a certain container, so you should increase the specificity like you’ve done for the :before pseudo element.

[Marliese]

Ah! Thank you. Now the blue lines (aqua) are gone from every other element, but they don’t appear on the text links though. Maybe i have to use HTML as well?

[Beverleyh]

You can use the developer toolbar (F12 in most browsers) to inspect the links for any other styles that are overriding the changes, and to check they’re applied correctly. Check that the selectors are correct too. And clear your cache (website, if it has one – it might be recompiling incorrectly, and the browser cache). I dont have any other suggestions. Sorry.

[Marliese]

Yeah, I know. Cache is cleared, code is at the right spot, selectors are the same I’m using for link styling. But :before and :after don’t appear in the console as a style, even though when I’m looking into css code, they are there. It is very weird. Oh well. Thanks anyway.

[Beverleyh]

From memory (currently on mobile)…

If you’re using Chrome developer tools, the pseudo elements are added into the element/DOM pane, so you can select them from that and then see their applied styles in the style pane.

If you’re using IE/Edge developer tools, the pseudo elements don’t appear in the element/DOM pane but instead reveal themselves in the style pane when you select the element they’re attached to.

Can’t remember what Firefox does – I think it behaves like Chrome with respect to pseudo elements.

[Marliese]

Ok, so I found the issue. I have to implement the space like this to get it working:

content:”\00a0″;

However, it is still not working. After I added the space this way, I’m back to this:

https://imgur.com/a/WoncI7l

:(

[Author]

Posts