<h1 class="head4">見出しパターン4</h1>
.head4 {
  border-bottom: solid 3px #3F51B5;
  position: relative;
}

.head4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #B53F4F;
  bottom: -3px;
  width: 30%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.