見出し用CSS　コピペ用

下線が点線の見出し用

.point_under_line {
	border-bottom: dashed 2px #27acd9;
	padding: 10px 0;
}

下線＋左に太めのボーダーライン

.left_boder_under_line {
	border-bottom: 1px solid #A3A3A3;
	padding: 0.2em 0.5em;
	border-left: solid 5px #27acd9;
	}

上下二重線の見出し用

.double_line {
	border-top: double 4px #27acd9;
	border-bottom: double 4px #27acd9;
	padding: 0.5rem 0;
	}

蛍光マーカーのようなライン

.line_marker {
	background: linear-gradient(transparent 60%, #c8f1ff 60%)
	}

リボンのような見出し

h3 {
	background: #27acd9;
	padding: 1rem;
	position: relative;
	color: #fff;
	}
h3:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 20px rgb(20, 86, 110);
}

グラデーションの見出し

h3 {
	position: relative;
	padding: 0.75em 1.5em;
	background: linear-gradient(to top, rgb(39, 172, 217), #45c4ee);
	color: #fff;
}

斜めラインのグラデーション見出し

h3 {
	padding: 1rem 2rem;
	color: #fff;
	transform: skew(-15deg);
	background-image: linear-gradient(to right, #27acd9 0%, #b4e12b 100%);
}

\吹き出し見出し/

h2 {
	position: relative;
	display: table-cell;
	padding: 0 45px;
}
h2:before, h2:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 44px;
	height: 2px;
	background-color: #27acd9;
}
h2:before {
	left:0;
	transform: rotate(60deg);
}
h2:after {
	right: 0;
	transform: rotate(-60deg);
}

吹き出しカラーの見出し

h2 {
	position: relative;
	padding: 1rem 2rem;
	border-radius: 10px;
	background: #27acd9;
	color: #fff;
}
h2:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	bottom: -10px;
	left: 1.5em;
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #27acd9 transparent transparent transparent;
}

区切り線　短いライン中央寄せ

h2 {
	position: relative;
	text-align: center;
	padding: 1.5rem;  
}
h2:before {
	position: absolute;
	content: '';
	background: #27acd9;
	bottom: 0;
	left: calc(50% - 30px);
	width: 80px;
	height: 5px;
}

囲い込みボーダーラインの左上に文字表示

h2 {
	position: relative;
	padding: 1rem 2rem;
	border: solid 2px #27acd9;
}
h2:after {
	position: absolute;
	content: "何かの文字を記入";
	top: -10px;
	left: 15px;
	background: #fff;
	font-size: 0.75rem;
	color: #27acd9;
	padding: 0 10px;
}

枠の左側に数字を入れた見出し

h2 {
  position: relative;
  overflow: hidden;
  padding: 1rem 2rem 1rem 120px;
  border: solid 2px #27acd9;
}
h2:before {
  position: absolute;
  content: '';
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  transform: rotate(25deg);
  background: #27acd9;
}
h2 span {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: 1;
	font-size: 30px;
	font-size: 3rem;
	padding-left: 16px;
	color: #fff;
}

Font Awesome使用

アイコン付き見出し

h2 {
	position: relative;
	padding-left: 1.5em;
}
h2:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	left: 0;
	top: 0;
	font-weight: 900;
	font-size: 1em;
	color: #27acd9;
}

枠付き

h2 {
	position: relative;
	padding: 0.5em 0.75em;
	border: solid 1px #27acd9;
	border-left: solid 2.5em #27acd9;
}
h2:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f0eb";
	font-weight: 900;
	color: #fff;
	padding: 0;
	left: -1.6em;
	top: 50%;
	transform: translateY(-50%);
}

背景付き

h2 {
	position: relative;
	background: #eaf5f9;
	padding: 0.5em 0.75em 0.5em 2.5em;
}
h2:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	font-weight: 900;
	color: #27acd9;
	padding: 0;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}