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: 8; /* border thickness without unit */
  --g: repeating-linear-gradient(45deg,#BD1550 0 10px,#E97F02 0 20px,#F8CA00 0 30px);
  border-image: var(--g) var(--b)//0 100vw 0 0;
  border-bottom: calc(var(--b)*1px) solid;
}
.left {
  border-image-outset: 0 0 0 100vw;
}

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