CSS伪选择器：伪之后有效：悬停

Question

I am trying to get the blue line that is appearing on hover to stay when the link is active. I am building an angular app with a few different views and when the user is active on a view, I would like the underline I have created on hover, to stay when the link is selected. I assume it needs to take on an active pseudo selector, but when I've added it in, it cancels the hover. Any suggestions on this would be much appreciated.

Here is my current code:

 footer { width: 100%; margin-top: 150px; padding: 0 60px; font-family: "Lora", serif; } footer a { text-decoration: none; color: #ABABAB; } a:after { content: ''; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition: width .5s ease, background-color .5s ease; } a:hover:after { width: 100%; background: #00FFE9; } .nav-footer { list-style: none; padding: 0; border-top: solid 2px #DEDEDE; display: flex; justify-content: space-between; font-size: 14px; padding: 15px; } 

 <footer> <nav class="nav-footer"> <a ui-sref-active="active" ui-sref="friends">View Friends</a> <a ui-sref-active="active" ui-sref="friend-search">Find Friends</a> <a ui-sref-active="active" ui-sref="update">Update Profile</a> </nav> </footer> 

Here is the jsfiddle: https://jsfiddle.net/uw8fqbyr/

Answer 1

ui-sref-active="active" directive adds "active" css class to a tag when selected view is active.

You should add this css rule

a.active:after {
  width: 100%;
  background: #00FFE9;
}

Answer 2

with

a:active:after {}

you can enable the text decoration for your anchor.

Answer 3

Try a:active{}

for the <a> tag visited

a:visited{}

Answer 4

Try below

 footer { width: 100%; margin-top: 150px; padding: 0 60px; font-family: "Lora", serif; } footer a { text-decoration: none; color: #ABABAB; } a:after { content: ''; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition: width .5s ease, background-color .5s ease; } a:hover:after { width: 100%; background: #00FFE9; } a.active:after { width: 100%; border-bottom: 3px solid #00FFE9; } .nav-footer { list-style: none; padding: 0; border-top: solid 2px #DEDEDE; display: flex; justify-content: space-between; font-size: 14px; padding: 15px; } 

 <footer> <nav class="nav-footer"> <a ui-sref-active="active" ui-sref="friends">View Friends</a> <a class="active" ui-sref-active="active" ui-sref="friend-search">Find Friends</a> <a ui-sref-active="active" ui-sref="update">Update Profile</a> </nav> </footer> 

Answer 5

只需添加以下代码链接，就不会在active状态下显示下划线
a:active { text-decoration: none; }