Navigation a hover style

HTML & CSS
1

So I’m working on a my personal portfolio after years that I haven’t touched coding in any form since I graduated from school, so kind of hard remembering my skills.
I’m using wordpress with Elementor PRO
and I’m changing a particular “a class” inside the nav that I would like to be able to recreate the design I proposed myself, somebody could give me a hint on how to make the hover on the a to have a type of border without the use of text-decoration under?

a image of what I mean undermarked with red of the section hover: https://prnt.sc/130odd4

2

Hi mysucsgo, Welcome to Sitepoint!
(An alert banner told me you were new here :slightly_smiling_face:)

There may be a newer/better way to do this that I’m not aware of.
I’ll show you how it can be done with a pseudo ::after element on the anchor.

Doing it this way you will be able to position the gold bottom underline anywhere under the text that you want it. I got as close to your sample image as I could.

Screenshot

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
a.special {
  display:inline-block;
  position:relative;
  font-size:2em;
  padding:0 .25em;
}
a.special::after {
  position:absolute;
  z-index:-1;
  content:"";
  background:transparent;
  width:100%;
  height:.25em;
  bottom:.125em;left:0;
}
a.special:hover::after {
  background:gold;
}
</style>

</head>
<body>

<a class="special">Home</a>

</body>
</html>
3 Likes
3

Text-underline-offset is the newer version.

Modern browsers only.

You can change thickness, color and offset.

5 Likes
4

How about this?

a:hover {

border:1px solid black; 

}
5

wouldn’t work cause u just get a border under based on ur section, the first one reported over its exactly what I meant but forgot how to do ^^.
thanks for the help tho.

1 Like
6

thank you for the help, exactly what I meant.

2 Likes
7

I know the question is answered but you can also use linear gradient for this which is useful if you want to fade or have multi colors.

Here’s a basic example:

4 Likes
8

I don’t see a gradient there :slight_smile:

9

Adding a border that was not previously there would alter the size/layout of the element, resulting in a layout shift which could cause problems or be visually awkward.
If you were to use a border, it would initially be there, but made invisible by matching the background colour, then changing the border-color on hover.

5 Likes
10

You weren’t supposed to. :slight_smile:

1 Like
11

@PaulOB :sweat_smile: so why put it as gradients? Maybe I missed something when I read your explanation on it.

12

Because you can’t set the size of the background otherwise.

A linear gradient is treated like a background image so you can do things that you can’t do to a normal background color.

4 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.