<h1>Hello! I  <strong>ღ</strong> W3cplus.com! Go go!</h1>
<h1>Hello! I  <strong>ღ</strong> W3cplus.com! Go go!</h1>
<h1>Hello! I  <strong>ღ</strong> W3cplus.com! Go go!</h1>
<h1>Hello! I  <strong>ღ</strong> W3cplus.com! Go go!</h1>
$square-color: #f4f4f4;
$square-size: 8px;

* {
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  padding: 2vw;
  line-height: 2;
  background-image:
    linear-gradient(45deg, $square-color 25%, transparent 25%, transparent 75%, $square-color 75%, $square-color), 
    linear-gradient(45deg, $square-color 25%, transparent 25%, transparent 75%, $square-color 75%, $square-color);
  background-position: 0 0, $square-size $square-size;
  background-size: ($square-size * 2) ($square-size * 2);
}

h1 {
  color: #f36;
  margin: 1em 2em;
  display:inline-block;
  
  &:nth-child(1) {
    background-image: linear-gradient(to right, blue 75%, transparent 75%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 8px 3px;
  }
  
  &:nth-child(2) {
    background-image: linear-gradient(to right, #d534e9 50%, transparent 50%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 6px 3px;
  }
  
  &:nth-child(3) {
    background-image: linear-gradient(to bottom, red 33%, transparent 33%, transparent 66%, red 66%, red);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 2px 6px;
  }
  &:nth-child(4){
    background-image: radial-gradient(lime 30%, transparent 0);
  background-size: 20px 20px;
  background-repeat: repeat-x;
    background-position: 0 100%
  }
 }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.