# post-carousel/4.0.8/src/blocks/post-timeline-two/style.scss

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News, version 4.0.8. 76 lines.

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/blocks/post-timeline-two/style.scss
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.8/raw/src/blocks/post-timeline-two/style.scss
- Modified: 2026-09-02T10:51:28+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/blocks/post-timeline-two/style.scss#L10-L20`.

```scss
// // title animate effect..................................................
.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title {
  position: relative;
  display: inline-block;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:after {
  content: "";
  position: absolute;
  transition: width 0.6s ease;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title::before {
  content: "";
  position: absolute;
  transition: width 0.6s ease;
}


.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title .line {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title .line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  // height: 2px;
  // background: linear-gradient(90deg, #ff416c, #ff4b2b);
  // transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s ease;
  z-index: -1;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover .line::after {
  transform: scaleX(1);
}

/* Using :nth-of-type to target only .line elements */
.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(1)::after {
  transition-delay: 0s;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(2)::after {
  transition-delay: 0.2s;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(3)::after {
  transition-delay: 0.4s;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(4)::after {
  transition-delay: 0.6s;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(5)::after {
  transition-delay: 0.8s;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(6)::after {
  transition-delay: 1s;
}


.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(7)::after {
  transition-delay: 1.2s;
}

.sp-smart-post-timeline-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(8)::after {
  transition-delay: 1.4s;
}
```