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

[Beverleyh]

Did you miss the addition of position:relative; on the a elements in the demo I posted? That needs to be implemented too. What does it look like then?

[Marliese]

Thanks. Didn’t catch that. It’s working now. Kinda. Had to configure it like this:

.single-post .the-content p a:after {
content:”\00a0″;
display:block;
position:absolute;
z-index:1;
top:0;
right:-1.9px;
width:2.6px;
height:100%;
background:#fff;
}

.single-post .the-content p a:before {
content:”\00a0″;
display:block;
position:absolute;
z-index:1;
top:0;
right:-1.9px;
width:2.6px;
height:100%;
background:#fff;
}

.single-post .the-content p a:before {
right:auto;
left:-1.9px;
}

But now this is happening as well …

https://imgur.com/a/7nyvhP5

[Beverleyh]

The vertical white stripe? Yes that’s correct, that’s the bar created by the pseudo element(s). That’s what you’re aiming to move left or right to cover the thin pink line(s) created by the box-shadow.

BTW – I notice that you changed the width of the pseudo bars to 2.6px. I wouldn’t do that if I were you because of fractional pixel rounding which is handled differently across browsers/devices. Try to work with full pixels where you can to avoid nasty surprises. In the original demo code I used -1.5px for left/right positioning (along with 2px wide bars), which shouldn’t round too crazily. Note that there it isn’t fighting against any other fractional units, unlike with your 2.6px width and 1.9px positioning. It’s too hard to predict how a browser will handle rendering of a 2.6px width element nudged sideways by 1.9px. A 2px width bar moved 1.5px left/right has an easier-to-predict (and test) outcome.

[Marliese]

Well, the weird thing is that this white line appears ONLY in this one word at that position. In other links it doesn’t show up. Also, positioning these white bars seems pretty hard. That’s why I chose these decimals. With original code, the bars were still visible on the right side. You can see for yourself if you want to: https://bit.ly/2P1nMJF

[Beverleyh]

Sorry I’m on mobile so I can’t see anything.

[Marliese]

I think I fixed it with this code. Applied just to mobile. What do you thin?

.single-post .the-content p a {
box-shadow: inset 0 -4px 0 -1px #e31a4b;
}

[Beverleyh]

I can’t see anything here but if it works for you, that’s great!

[Author]

Posts