CSS Tip

Extend your underline to the edge of the screen

Add an underline to your title and extend it to the right (or left) edge of the screen whatever the element/container size

An extended underline to left and the right

.full-line-right {
  border-image: 
    linear-gradient(0deg,
      #1095c1 5px, /* color and thickness */
    #0000 0) fill 0//0 100vw 0 0;

}
.full-line-left {
  border-image: 
    linear-gradient(0deg,
      #c32e2e 5px,
    #0000 0) fill 0//0 0 0 100vw;
}

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

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

More CSS Tips