::在Chrome Mobile上没有出现伪元素之后

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>