Kevin Powell - Community•7mo ago

Replicating Kevin's Pen With A Different Layout

I am trying to visually replicate https://codepen.io/kevinpowell/pen/GrLKNo by doing https://codepen.io/imdiau/pen/OJYQpNw My reasoning is to increase the width of a span with colored background as I hover on the navbar item. However, as I hover, the width does not increase currently. What am I missing?

Kevin

CodePen

Navbar with fun hover effect

When you hover over a link, a bar grows out above the link, and shrinks away when you move off the link. I created this for a YouTube tutorial...

CodePen

OJYQpNw

...

5 Replies

Kevin Powell•7mo ago

Right now, your span has a position: static. That's the default value, and it also means that the positioning properties (top, right, bottom, left) don't do anything. Also, because the span is an inline element, height doesn't work either.

MarkBoots•7mo ago

you could do something like this without the use of other elements

li {
  --border-top-size: 2px;
  border-top: var(--border-top-size) solid transparent;
  background-image: linear-gradient(to right, red, blue);
  background-clip: border-box;
  background-repeat: no-repeat;
  background-size: 0% var(--border-top-size);
  transition: background-size 1s ease;
  &:hover {
    background-size: 100% var(--border-top-size;
  }
}

li {
  --border-top-size: 2px;
  border-top: var(--border-top-size) solid transparent;
  background-image: linear-gradient(to right, red, blue);
  background-clip: border-box;
  background-repeat: no-repeat;
  background-size: 0% var(--border-top-size);
  transition: background-size 1s ease;
  &:hover {
    background-size: 100% var(--border-top-size;
  }
}

UhurOP•7mo ago

thanks for the comments 🙂 I have seen this & and % syntax before, but couldn't find info on it. What does that do? I will retry with using border top, totally forgot that exists...

MarkBoots•7mo ago

ah, it's a (new) way to nest selectors this is the same as

li {
 ...
}
li:hover {
  ...
}

li {
 ...
}
li:hover {
  ...
}

the & sign combines (pseudo)selectors you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

MDN Web Docs

Using CSS nesting - CSS: Cascading Style Sheets | MDN

The CSS nesting module allows you to write your stylesheets so that they are easier to read, more modular, and more maintainable. As you are not constantly repeating selectors, the file size can also be reduced.

UhurOP•7mo ago

many thanks!

Gaming

Programming

Replicating Kevin's Pen With A Different Layout