TalonHughes TalonHughes - 11 months ago 53
AngularJS Question

CSS Pseudo Selector: Active After Pseudo: Hover

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;

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

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

Answer Source

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;