Kevin Powell - Community•2y ago

Making a transition responsive

I've been using a background transition for a hover effect on links. It works all right, but it breaks off from each line when the text breaks into multiple lines. How can I make it stick to one line? Here's the attached codepen. https://codepen.io/lofty-brambles/pen/jOKVvMY

Lofty-Brambles

CodePen

jOKVvMY

...

11 Replies

MarkBoots•2y ago

you don't want the text to breakline? add white-space: no-wrap but then it will make the body wider than the screen or you want the effect only on the first line?

p {
  width: fit-content;
  position: relative;

  &:hover::after {
    background-size: 100% 88%;
  }
  &::after{
    content: '';
    position: absolute;
    inset: 0 0 calc(100% - 1em) 0;
    z-index: -1;
    background: 
      linear-gradient( 120deg, var(--foreground) 0%, var(--secondary) 100% ) bottom / 100% 0.2em no-repeat;
    transition: background-size 0.25s ease-in;
  }
}

p {
  width: fit-content;
  position: relative;

  &:hover::after {
    background-size: 100% 88%;
  }
  &::after{
    content: '';
    position: absolute;
    inset: 0 0 calc(100% - 1em) 0;
    z-index: -1;
    background: 
      linear-gradient( 120deg, var(--foreground) 0%, var(--secondary) 100% ) bottom / 100% 0.2em no-repeat;
    transition: background-size 0.25s ease-in;
  }
}

Lofty!•2y ago

Could I make the effect extend to multiple lines, when the line breaks Sorry for the delay, kinda lost connection.

MarkBoots•2y ago

yea, change the inset to inset: 0 and it can be even easier in that case

p {
  width: fit-content;
  background:
    linear-gradient( 120deg, var(--foreground) 0%, var(--secondary) 100% ) bottom / 100% 0.2em no-repeat;
  transition: background-size 0.25s ease-in;
  &:hover {
    background-size: 100% 88%;
  }
}

p {
  width: fit-content;
  background:
    linear-gradient( 120deg, var(--foreground) 0%, var(--secondary) 100% ) bottom / 100% 0.2em no-repeat;
  transition: background-size 0.25s ease-in;
  &:hover {
    background-size: 100% 88%;
  }
}

Lofty!•2y ago

Ah, as in, I wanted the background to be split into many pieces across the lines themselves

MarkBoots•2y ago

ah like so... hmm. have to think about that one. not sure

Lofty!•2y ago

I first thought of spans and putting an effect on them, but trying to connect the effects up after that seems to be a hassle.

MarkBoots•2y ago

you can use <mark> but the effect will be slightly different, it will break the gradient into the lines

<p><mark>This is just some sample text. This is just some sample text. This is just some sample text. This is just some sample text. This is just some sample text.</mark></p>

<p><mark>This is just some sample text. This is just some sample text. This is just some sample text. This is just some sample text. This is just some sample text.</mark></p>

p {
  &:hover mark{
    background-size: 100% 88%;
  }
  mark{
    background: linear-gradient( 120deg, var(--foreground) 0%, var(--secondary) 100% ) bottom / 100% 0.2em no-repeat;
    transition: background-size 0.25s ease-in;
  }
}

p {
  &:hover mark{
    background-size: 100% 88%;
  }
  mark{
    background: linear-gradient( 120deg, var(--foreground) 0%, var(--secondary) 100% ) bottom / 100% 0.2em no-repeat;
    transition: background-size 0.25s ease-in;
  }
}

Lofty!•2y ago

Actually, that's perfect, thanks!

MarkBoots•2y ago

np, yw I was just realizing. Don't use <mark>. It will give importance to the text (screenreaders) ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark a span with display: flow-content is better

MarkBoots•2y ago

Lofty!•2y ago

hmm... I see.. interesting I do need importance as it's being used as the heading of the latest article, so I'll keep it in mind!

Gaming

Programming

Making a transition responsive