I wanted to make a nice underlined menu on website and I found code like below.
It’s cool animated but can anyone tell me how to make active link underlined to make visitors sure on which page they are?
list-style: none;
}
li {
display: inline-block;
padding: 20px 0 20px;
vertical-align: middle;
}
a:hover, a:focus, a:active {
color: #999;
text-decoration: none;
}
a {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
text-decoration: none;
transition: color 0.1s, background-color 0.1s;
}
a {
position: relative;
display: block;
padding: 16px 0;
margin: 0 12px;
letter-spacing: 1px;
font-size: 12px;
line-height: 16px;
font-weight: 900;
text-transform: uppercase;
transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
color: #000;
}
a::before {
content: '';
display: block;
position: absolute;
bottom: 3px;
left: 0;
height: 3px;
width: 100%;
background-color: #000;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s,transform 0.2s ease-out;
}
a:active::before {
background-color: #000;
}
a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}```
2
Answers
Add a class called "active" to your active a element like so:
Then add this to your CSS:
I would not do what any other answer says.
(First of all, I’m not a novice WordPress user, but I have experience in CSS)
If you want something along the lines of this:
Preview
Then, a span
<span></span>
with nothing in it should do. Then in CSS change the peramiters all you like!