CODEWITHSUNDEEP
htmlcss
StuffedPoblano
StuffedPoblano

Reputation: 695

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;
}
<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/

Upvotes: 1

Views: 1179

Answers (5)

Akhil J
Akhil J

Reputation: 69

Just add below code link never show underline on active state
a:active { text-decoration: none; }

Upvotes: 0

Dhaarani
Dhaarani

Reputation: 1370

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>

Upvotes: 1

Aatif Bandey
Aatif Bandey

Reputation: 1145

Try a:active{}

for the <a> tag visited

a:visited{}

Upvotes: 1

Natiq
Natiq

Reputation: 416

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

Upvotes: 2

Gabbax0r
Gabbax0r

Reputation: 1846

with

a:active:after {}

you can enable the text decoration for your anchor.

Upvotes: 1

Related Questions