CSS Tip

Extend your underline to the edge of the screen II

Improving the previous effect to consider an underline with a gradient coloration that extend to the edge of the screen

An extended underline to left and the right

.full-line {
  --b: 8px; /* border thickness */
  --g: repeating-linear-gradient(45deg,#BD1550 0 10px,#E97F02 0 20px,#F8CA00 0 30px);
  border-image: var(--g) fill 0/calc(100% - var(--b)) 0 0/0 100vw 0 0 repeat;
  padding-block: 10px;
}
.left {
  border-image-outset: 0 0 0 100vw;
}

See the Pen CSS only extended underline with gradient by Temani Afif (@t_afif) on CodePen.

Related: smashingmagazine.com/2024/01/css-border-image-property/

More CSS Tips