Here's a simple question for you. Take a look at the images below for reference.
Check out the iOS Safari browser on my phone https://i.sstatic.net/o9jOe.jpg
and compare it to my desktop browser, both screenshots were taken live from the server.
https://i.sstatic.net/zQpyg.png
Now let's dive into the HTML and CSS code.
HTML
<div class="about-more-wrapper">
<a type="button" data-toggle="modal" data-target="#inProgressModal">
More
</a>
</div>
CSS
.about-more-wrapper a {
cursor: pointer;
color: #666666;
display: block;
height: 100%;
min-height: 40px;
margin-top: 0;
padding-left: 1.625rem;
}
.about-more-wrapper a:hover {
color: #101010;
text-decoration: none;
}
.about-more-wrapper a::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 5%;
background-color: #666666;
height: 20%;
width: 1px;
}
.about-more-wrapper a::after {
content: '';
position: absolute;
right: 0;
bottom: 0%;
left: 5%;
background-color: #101010;
height: 0%;
width: 1px;
}
The issue I'm facing is that the CSS code doesn't reflect the color displayed on the iOS device. Any help would be greatly appreciated. Thanks!