Question 11723 in Shopify Question posted in
The Shopify help center can be found here.

How to override all link effects? – Shopify

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>
Tags:

2

Answers


  1. 0

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

    a.a1:hover:after {
    display: none !important;
}
    Login or Signup to reply.
  2. 0

    So the transition is caused due to the transition on pseudo element a:after. To change this behaviour just set transition: none; on a:after

    Here’s what I mean:

    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: inline-block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: none;
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search