<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
	border-bottom: 2px dashed #29B6F6;
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
	border-bottom: 2px dotted #F4511E;
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
	border-bottom: 3px double #0097A7;/*上1px＋間1px＋下1px*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
	position: relative;
	padding: .3em;
}
.cp_h1title::before {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	border-top: 1px dotted #E91E63;/*上の線*/
	border-bottom: 2px solid #E91E63;/*下の線*/
	width: 100%;
	height: 6px;/*空けたい隙間＋上の線＋下の線*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
	border-bottom: 3px solid #64B5F6;/*上の線*/
	box-shadow:0px 6px 0px 0px #0D47A1;/*下の線*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title{
	position: relative;
	overflow: hidden;
}
.cp_h1title::before,
.cp_h1title::after{
	position: absolute;
	content: "";
	bottom: 0;
	width: 100%;
}
.cp_h1title:before{
	border-bottom: 4px solid #F4511E;/*文字下のライン*/
}
.cp_h1title:after{
	border-bottom: 4px solid #FFAB91;/*文字以外のライン*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title{
  border-bottom: solid 4px #4DD0E1;/*ベースのライン*/
  position: relative;
}
.cp_h1title:after {
  position: absolute;
  content: '';
  bottom:-4px;/*ラインの太さを変えたらこちらも同様に「-」をつけて変更*/
  left:0;
  border-bottom: solid 4px #006064;/*色を変えたいライン*/
  width: 15%;/*色を変えたいラインの長さ*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title{
  position: relative;
}
.cp_h1title::before,
.cp_h1title::after {
  content: '';
  position: absolute;
  bottom: -4px;/*ラインの太さを変えたらこちらも同様に「-」をつけて変更*/
  left: 0;
  height: 4px;/*ラインの太さ*/
  width: 100%;
  background-color: #E91E63;/*一番上のラインの色*/
}
.cp_h1title::before {
  z-index: 1;/*重なり順を一番上に指定*/
  width: 15%;/*色を変えたいラインの長さ*/
}
.cp_h1title::after {
  background: repeating-linear-gradient(45deg, #fff, #fff 2px, #E91E63 2px, #E91E63 4px);/*ストライプの指定*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
  position: relative;
  border-bottom: 2px solid #7986CB;/*下の細いライン*/
}
.cp_h1title::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  content: '';
  width: 15%;/*被せるラインの長さ*/
  height: 6px;/*被せるラインの太さ*/
  background-color: #303F9F;/*被せるラインの色*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

    .cp_h1title{
      position: relative;
    }
    .cp_h1title::before {
      position: absolute;
      content: '';
      bottom: 0;
      width: 100%;
      height: 5px;/*ラインの太さ*/
      background: linear-gradient(135deg, #1E88E5 0%,#039BE5 25%,#00ACC1 50%,#00897B 75%,#43A047 100%);/*グラデーションの設定*/
    }

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title{
  position: relative;
}
.cp_h1title:after {
  content: "";
  display: block;
  height: 4px;/*ラインの太さ*/
  background: linear-gradient(to right, #E91E63, transparent);
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
  position: relative;
  padding-left: 25px;
}
.cp_h1title:before,
.cp_h1title:after {
  position: absolute;
  content: '';
  bottom: 0;
}
.cp_h1title:before {
  left: 0;
  width: 15px;/*三角形の横サイズ*/
  height: 15px;/*三角形の縦サイズ*/
  background-color: #1E88E5;/*三角形の色*/
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);/*三角形を指定*/
}
.cp_h1title:after {
  left: 15px;
  width: calc(100% - 15px);/*ライン全体の長さ：100%のラインから三角の15px分をマイナスする*/
  border-bottom: solid 4px #1E88E5;/*ラインの指定*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
  position: relative;
}
.cp_h1title:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;/*ラインの太さ*/
  background-image: repeating-linear-gradient(-45deg, #FF7043, #FF7043 3px, #fff 3px, #fff 6px);/*ストライプの指定*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title {
  position: relative;
  z-index: 0;
}
.cp_h1title::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 60%, #F8BBD0 60%);
  z-index: -1;
  transform: skew(20deg, 0deg);/*ラインの傾斜角度*/
}

<h1 class="cp_h1title">見出しテキスト</h1>

.cp_h1title{
  position: relative;
  display: flex;
  align-items: flex-end;/*被せるラインの位置下付（上下中央ならばcenter）*/
}
.cp_h1title:before{
  position: absolute;
  content: '';
  height: 15px;/*ラインの太さ*/
  width: 100%;/*ラインの長さ*/
  background-color: rgba(144, 202, 249,0.5);/*ラインの色*/
  transform: skew(20deg, 0deg);/*ラインの傾斜角度*/
}