CSS - Nav a tags have underline in Safari

Question

The <a> tags on my nav bar have a link-underline which only shows up on Safari. How do I get rid of it? I've already got text-decoration: none; which should remove it but its not. Never seen that before -

The purple line is the border-bottom , it's the immediate black underline that I need to remove.

Here's my code as it stands -

 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> 

Answer 1

Just figures it out, bit embarrassed putting it as an answer but I was thrown a little by the fact it was only showing the line in Safari.

nav a:hover {
  color: #000000;
  text-decoration: none;
}

Answer 2

Its always better to use it this way,

  nav a:hover 
 {
  color: #000000;
  text-decoration: none! important;
  }