Solution 1 :

I don’t know what you mean by “on scroll,” but the animation you want is applied by the CSS psuedo-class :hover. There is no psuedo-class for scroll, so you’ll need to probably involve Javascript.

The list of available CSS psuedo-classes can be found here. Try experimenting with them to see if they’ll do what you want.

The Javascript onscroll event can be found here.

Problem :

In this code title border is “spreading” on hover and I want to create the same effect on a scroll. How can I do this?

.title {
  position: relative;
  font-size: 40px;
  font-weight: bolder;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  color: #262626;

.title::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, #ED1C24, rgb(230, 7, 74));

.section-box:hover .title::before {
  left: 0;
  right: 0;
  height: 2px;
  transition: 1s;
  background: #ED1C24;
<section class="section-box" id="about">
  <div class="container">
    <div class="section-head">
      <h1 class="title">about us</h1>


Comment posted by Caleb Jay

Not sure what you mean by “spreading” or what exactly you’re trying to achieve. Can you post an example of the title “spreading?” Do you mean the linear gradient?

Comment posted by Pushpendra Kushwah

yes, title bottom linear-gradient

Comment posted by