Skip to main content
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.