[FIXED] How to override all link effects?

Issue

So I'm trying to edit the Theme of our store on Shopify. I'm doing it in css.liquid under Asset.

Anyway, what I'm precisely doing is I'm trying to override the effect of a link hover (I'm assuming that it is on the theme). Here's a sample of it: https://codepen.io/jstn/pen/mdoOZJ

I've added the following HTML code below:

<a href="#" class="a1">Test</a>

and on CSS I've added the following:

a.a1:hover{
        transition: none;
    }

I want to remove those animated underlines when you hover over the links. Is there a way to do this?

Thank you so much in advance! I appreciate it!

body,html {
  margin: 0;
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background: #000;
}
ul { 
  margin: 150px auto 0; 
  padding: 0; 
  list-style: none; 
  display: table;
  width: 600px;
  text-align: center;
}
li { 
  display: table-cell; 
  position: relative; 
  padding: 15px 0;
}
a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
a:hover:after { 
  width: 100%; 
  left: 0; 
}
@media screen and (max-height: 300px) {
    ul {
        margin-top: 40px;
    }
}

<ul>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Solution

The underline is being created with the a:after pseudo-element. To override it, this should suffice:

a.a1:hover:after {
    display: none !important;
}

Answered By - Thomas

Answer Checked By - Pedro (PHPFixing Volunteer)