::after pseudo-element not appearing on Chrome Mobile - html

Question

Pretty simple but odd bug, I have a pseudo-element which is appearing fine on desktop browsers but disappears on mobile Chrome (not sure about iOS, no iPhone to test with)
Here's the basic CSS:
a {
text-decoration: none;
display: inline-block;
color: #000;
overflow: visible;
}
a::after {
content: '';
display: block;
height: 8px;
width: 98%;
background: #8BC8F690;
margin-top: -9px;
margin-left: 2px;
}
<a>hello</a>
jsfiddle:
https://jsfiddle.net/w4d1jteb/

Answer 1

Check your background. This is not a valid value. It's 8 chars long, but only can have 6.
a {
text-decoration: none;
display: inline-block;
color: #000;
overflow: visible;
}
a::after {
content: '';
display: block;
height: 8px;
width: 98%;
background: #8BC8F690; <-- This is not valid. *1*2
margin-top: -9px;
margin-left: 2px;
}
*1: You could try background-color: rgba(139, 200, 246, 0.565) instead.
*2: Or just use #8BC8F6.
See these examples below:
a {
text-decoration: none;
display: inline-block;
color: #000;
overflow: visible;
}
a::after {
content: '';
display: block;
height: 8px;
width: 98%;
background-color: rgba(139, 200, 246, 0.565);
margin-top: -9px;
margin-left: 2px;
}
#test {
text-decoration: none;
display: inline-block;
color: #000;
overflow: visible;
}
#test::after {
content: '';
display: block;
height: 8px;
width: 98%;
background: #8BC8F6;
margin-top: -9px;
margin-left: 2px;
}
<a>hello</a>
<a id="test">hello2</a>