<body>
<h1 class="border">左に線をつけた見出し：borderで指定</h1>
<h1 class="before">左に線をつけた見出し：beforeで指定</h1>
<h1 class="before-radius">左に線をつけた見出し：beforeで指定&角丸指定</h1>
<h1 class="double">左に線をつけた見出し：2本線</h1>
</body>
/* border */
h1.border{
  padding-left: 15px;
  border-left: 5px solid #000;
  font-size: 24px;
  line-height: 1.8;
}
/* before */
h1.before{
  position: relative;
  padding-left: 15px;
  font-size: 24px;
  line-height: 1.8;
}
h1.before:before{
  content:"";
  width:5px;
  height:calc(100% - 20px);
  background:#000;
  position:absolute;
  top:10px;
  left:0;
}
/* before-radius */
h1.before-radius{
  position: relative;
  padding-left: 15px;
  font-size: 24px;
  line-height: 1.8;
}
h1.before-radius:before{
  content: "";
  width: 6px;
  height: calc(100% - 20px);
  background: #000;
  border-radius: 3px;
  position: absolute;
  top: 10px;
  left: 0;
}
/* double */
h1.double{
  position: relative;
  padding-left: 15px;
  font-size: 24px;
  line-height: 1.8;
}
h1.double:before{
  content: "";
  width: 5px;
  height: calc(100% - 20px);
  background: #000;
  position: absolute;
  top: 10px;
  left: 0;
}
h1.double:after{
  content: "";
  width: 3px;
  height: calc(100% - 20px);
  background: #000;
  position: absolute;
  top: 10px;
  left: 7px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.