Post is inspired by Michelle Barker's great article . Reset styles Let's reset all styles to the user agent default ones and see how link looks like.
a,
a:hover,
a:active,
a:visited {
all: revert;
}
Remove underline To remove the line below the link change property from {text-decoration: underline} to {text-decoration: none}
a,
a:hover,
a:active,
a:visited {
all: revert;
text-decoration: none;
}
Simple & nice Simple styles can be applied for an anchor tag to make it look nicer.
a {
color: #0083bf;
text-decoration-color: transparent;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 0.09em;
}
a:hover {
transition: text-decoration-color 300ms;
text-decoration-color: #0495d7;
}
With animation Underline from the top We can also imitate underline by pseudo class.
a {
color: #0083bf;
text-decoration: none;
position: relative;
padding: 0.2em 0;
}
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.05em;
background-color: #0083bf;
opacity: 0;
transition: opacity 300ms, transform 300ms;
}
a:hover::after,
a:focus::after {
opacity: 1;
transform: translateY(0.15em);
}
Underline from the left
a {
color: #0083bf;
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: bottom;
}
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.05em;
background-color: #0083bf;
transform: translateX(-100%) translateY(1em);
}
a:hover::after,
a:focus::after {
transform: translateX(0%) translateY(1em);
transition: transform 300ms;
}
Underline from the center
a {
color: #0083bf;
text-decoration: none;
display: inline-block;
position: relative;
}
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.05em;
background-color: #0083bf;
}
a::after {
transform: scale(0);
transform-origin: center;
}
a:hover::after,
a:focus::after {
transform: scale(1);
transition: transform 300ms;
}