There seems to be an issue with the <a> tags in my nav bar - they are showing a link-underline only on Safari. I've tried using text-decoration: none; but it's not working as expected. This is quite unusual, and I need to find a way to remove it.
https://i.sstatic.net/RXN3r.png
The purple line you see is actually the border-bottom, but what I really need to get rid of is the immediate black underline.
Below is the current code snippet that is causing this behavior -
header {
height: 50px;
background-color: #fff;
}
nav {
overflow: hidden;
text-align: center;
padding: 10px;
background-color: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
nav a {
color: #000000;
transition: all 0.2s ease-in-out 0s;
text-decoration: none;
display: inline-block;
padding: 15px 15px 5px 15px;
border-bottom: 2px solid transparent;
}
nav a:link {
color: #000000;
text-decoration-line: none;
}
nav a:nth-of-type(1):hover {
border-color: rgb(255, 29, 142);
}
nav a:nth-of-type(2):hover {
border-color: rgb(133, 52, 146);
}
nav a:nth-of-type(3):hover {
border-color: rgb(255, 128, 55);
}
nav a:nth-of-type(4):hover {
border-color: rgb(0, 182, 223);
}
nav a:nth-of-type(5):hover {
border-color: rgb(63, 190, 150);
}
nav a:nth-of-type(6):hover {
border-color: rgb(255, 222, 32);
}
nav a:hover {
color: #000000;
}<header>
<nav>
<a href="<?php the_permalink(4); ?>#particle-slider">Home</a>
<a href="#what">What we do</a>
<a href="#who">Who we are</a>
<a href="#partners">Who we work with</a>
<a href="#contact">Say hello</a>
<a href="<?php the_permalink(70); ?>">Blog</a>
</nav>
</header>