Style HTML content with CSS gradient border

by musicreader

HTML

<div class="element">Content here<br/> test123</div>

CSS

.element {
  border-bottom: 10px solid transparent;
  background-image: 
    linear-gradient(to bottom, 
      black 1px, 
      black 1px, 
      lightblue 5px, 
      lightblue 5px, 
      black 6px, 
      black 6px, 
      white 10px
    );
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 10px;
}