Different hover effects on same page

• 

  drewberts · Member · Feb 9, 2018 at 5:27 pm

  • Copy link
  • Add topic to favorites

  I am using the following CSS to create an animated underline effect on my links

  .et_pb_text.my-bullets li { line-height: 2.2em !important; }
  
  a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom:	0;
    left: 0;
    background-color: #614b71;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
  a, .entry-meta a, entry-content a {
    position: relative;
     color: #614b71;
     text-decoration: none;
  
  }
  a:hover {
     text-decoration: none;
     color: #614b71;
  }
  a:hover:after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  This works fine as I assign my-bullets to the text. What I want to do is have the same effect on other elements of the page but change the colour etc. I’ve duplicated the CSS, changed the bits I want to alter and changed “my-bullets” to “my-links” and assigned this CSS class to the other elements on the page but they still display using the original parameters. What am I doing wrong?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 9, 2018 at 8:17 pm

  • Copy link

  Hi @drewberts, it looks like you are using WordPress but you are not hosted here at WordPress.com. These forum are for those hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author/vendor directly or ask in the volunteer-based WordPress.org forums.

  The differences between WordPress.com and WordPress.org.