ホームページ制作に役立つ見出し一覧：CSS/HTML

<div class="midashi">１．シンプルな下線の見出し</div>

.midashi {
border-bottom: solid 2px black;
}

<div class="midashi">２．色文字と破線の見出し</div>

.midashi {
color:blue;
border-bottom:dashed 2px blue;
}

<div class="midashi">３．色文字と点線の見出し</div>

.midashi {
color:red;
border-bottom:dotted 2px red;
}

<div class="midashi">４．色文字と二重線の見出し</div>

.midashi{
color:green;
border-bottom:double 5px green;
}

<div class="midashi">５．上下に線の見出し</div>

.midashi {
padding:0.5em 0;
border-top:solid 2px;
border-bottom:solid 2px;
}

<div class="midashi">６．囲んだ見出し</div>

.midashi {
padding:0.5em;
border:solid 3px green;
}

<div class="midashi">７．角丸で囲んだ見出し</div>

.midashi {
padding:0.5em;
border:solid 3px green;
border-radius:0.5em;
}

<div class="midashi">８．角丸で囲んだ見出し</div>

.midashi {
padding:0.5em;
border:solid 3px green;
border-radius: 0.5em 0 0 0.5em;
}

<div class="midashi">９．左線の見出し</div>

.midashi {
padding:0.25em 0.5em;
background:transparent;
border-left:solid 7px green;
}

<div class="midashi">10．下線で左は別色の見出し</div>

.midashi {
position:relative;
border-bottom:solid 3px #33FF99;
}
.midashi:after {
position:absolute;
content:" ";
display:block;
border-bottom:solid 3px green;
bottom:-2px;
width:10%;
}

<div class="midashi">11．太い下線の見出し</div>

.midashi {
background:linear-gradient(transparent 40%, #33FF99 100%);/*%で縦グラデーションの設定*/
}

<div class="midashi">12．ストライプの下線の見出し</div>

.midashi {
position:relative;
}
.midashi:after {
content:"";
position:absolute;
left:0;
bottom:-5px;
width:100%;
height:7px;
background:-webkit-repeating-linear-gradient(-45deg, #33FF99, #33FF99 2px, #fff 2px, #fff 4px);
background:repeating-linear-gradient(-45deg, #33FF99, #33FF99 2px, #fff 2px, #fff 4px);
}

<div class="midashi">13．グラデーションの下線の見出し</div>

.midashi {
position:relative;
}
.midashi:after {
content:"";
display:block;
height:5px;
background:-webkit-linear-gradient(to right, lightgreen, transparent);
background:linear-gradient(to right, lightgreen, transparent);
}

<div class="midashi">14．グラデーションの下線の見出し</div>

.midashi {
position:relative;
}
.midashi:after {
content:"";
display:block;
height:5px;
background:-webkit-linear-gradient(to right, lightgreen, yellow);
background:linear-gradient(to right, lightgreen, yellow);
}

<div class="midashi">15．矢印下線の見出し</div>

.midashi {
position:relative;
padding-left:1.2em;
}
.midashi:before {
content:'';
position:absolute;
bottom:-3px;
left:0;
width:0;
height:0;
border:none;
border-left:solid 15px transparent;
border-bottom:solid 15px green;
}
.midashi:after {
position:absolute;
content:'';
bottom:-3px;
left:10px;
width:100%;
border-bottom:solid 3px green;
}

<div class="midashi">16．矢印とグラデ下線の見出し</div>

.midashi {
position: relative;
padding-left:1.2em;
}
.midashi:before {
content:'';
position:absolute;
bottom:-3px;
left:0;
width:0;
height:0;
border:none;
border-left:solid 15px transparent;
border-bottom:solid 15px green;
}
.midashi:after {
content:'';
position:absolute;
bottom:-3px;
left:10px;
width:100%;
display:block;
height:5px;
background:-webkit-linear-gradient(to right, green, transparent);
background:linear-gradient(to right, green, transparent);
}

<div class="midashi">17．文字の両端に線の見出し</div>

.midashi {
position:relative;
display:inline-block;
padding:0 80px
}
.midashi:before, .midashi:after {
content:'';
position:absolute;
top:50%;
display:inline-block;
width:15%;
height:2px;
background-color:black;
}
.midashi:before {
left:0;
}
.midashi:after {
right: 0;
}

<div class="midashi">18．文字の両端に二重線の見出し</div>

.midashi {
position:relative;
display:inline-block;
padding:0 80px
}
.midashi:before, .midashi:after {
content:'';
position:absolute;
top:50%;
display:inline-block;
width:65px;
height:6px;
border-top:solid 2px green;
border-bottom:solid 2px green;
}
.midashi:before {
left:0;
}
.midashi:after {
right: 0;
}

<div class="midashi">19．スラッシュで囲んだ見出し</div>

.midashi {
position:relative;
display:inline-block;
padding:0 50px
}
.midashi:before, .midashi:after {
content:'';
position:absolute;
top: 50%;
display:inline-block;
width:35px;
height:2px;
background-color:green;
-webkit-transform:rotate(-60deg);
transform:rotate(-60deg);
}
.midashi:before {
left:0;
}
.midashi:after {
right: 0;
}

<div class="midashi">20．カギカッコの見出し</div>

.midashi {
position:relative;
padding:0 40px;
line-height:1.5;
display:inline-block;
}
.midashi:before, .midashi:after {
content:'';
width:15px;
height:25px;
position:absolute;
display:inline-block;
}
.midashi:before {
border-left:solid 3px green;
border-top:solid 3px green;
top:-3px;
left: 20px;
}
.midashi:after {
border-right:solid 3px green;
border-bottom:solid 3px green;
bottom:-3px;
right: 20px;
}

<div class="midashi">21．大カッコの見出し</div>

.midashi {
position:relative;
padding:0 40px;
line-height:1.5;
display:inline-block;
top:0;
}
.midashi:before, .midashi:after {
content:'';
width:10px;
height:100%;
position:absolute;
display:inline-block;
}
.midashi:before {
border-left:solid 3px green;
border-top:solid 3px green;
border-bottom:solid 3px green;
left:25px;
}
.midashi:after {
content:'';
border-top:solid 3px green;
border-right:solid 3px green;
border-bottom:solid 3px green;
right:25px;
}

<div class="midashi">22．交差線のある囲みの見出し</div>

.midashi {
position:relative;
padding:0.25em 1em;
border-top:solid 2px green;
border-bottom:solid 2px green;
}
.midashi:before, .midashi:after {
content:'';
position:absolute;
top:-7px;
width:2px;
height:-webkit-calc(100% + 14px);
height:calc(100% + 14px);
background-color:green;
}
.midashi:before {
left:7px;
}
.midashi:after {
right:7px;
}

<div class="midashi">23．上下大カッコの見出し</div>

.midashi {
position:relative;
margin:10px 0;
text-align:center;
padding:5px;
background-color:white;
}
.midashi:before{
content:'';
height:80px;
width:120px;
border:solid 1px green;
display:block;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
z-index:-1;
}

<div class="midashi"><span>24．両端に線の見出し（センター）</span></div>

.midashi {
position:relative;
text-align:center;
}
.midashi span {
position:relative;
z-index:2;
display:inline-block;
margin:0 4em;
padding:0 1em;
background-color:#fff;
text-align:left;
}
.midashi::before{
position:absolute;
top:50%;
z-index:1;
content:'';
display:block;
width:100%;
height:1px;
background:#aaa;
background-color:black;
}

<div class="midashi"><span>25．両端に二重線の見出し（センター）</span></div>

.midashi {
position:relative;
text-align:center;
}
.midashi span {
position:relative;
z-index:2;
display:inline-block;
margin:0 4em;
padding:0 1em;
background-color:#fff;
text-align:left;
}
.midashi::before{
position:absolute;
top:50%;
z-index:1;
content:'';
display:block;
width:100%;
height:6px;
border-top:solid 2px green;
border-bottom:solid 2px green;
}

<div class="midashi"><span>26．両端にグラデーション線の見出し</span></div>

.midashi {
position:relative;
text-align:center;
}
.midashi span {
position:relative;
z-index:2;
display:inline-block;
margin:0 4em;
padding:0 1em;
background-color:#fff;
text-align:left;
}
.midashi::before{
position:absolute;
top:50%;
z-index:1;
content:'';
display:block;
width:100%;
height:3px;
background:#aaa;
background:-webkit-linear-gradient(-45deg, transparent, green 10%, green 90%, transparent);
background:linear-gradient(-45deg, transparent, green 10%, green 90%, transparent);
}

<div class="midashi">27．上吹き出しの見出し</div>

.midashi {
position:relative;
background:white;
border:solid 3px green;padding: 0.3em;
border-radius:10px;
}
.midashi::before,
.midashi::after {
position:absolute;
top:-70%;
left:20px;
content:'';
height:0;
width:0;
border:10px solid transparent;
}
.midashi::before {
border-bottom:15px solid green;
}
.midashi::after {
margin-top:4px;
border-bottom:15px solid white;
}

<div class="midashi">28．下吹き出しの見出し</div>

.midashi {
position:relative;
background:white;
border:solid 3px green;padding: 0.3em;
border-radius:10px;
}
.midashi::before,
.midashi::after {
position:absolute;
top:100%;
left:20px;
content:'';
height:0;
width:0;
border:10px solid transparent;
}
.midashi::before {
border-top:15px solid green;
}
.midashi::after {
margin-top:-4px;
border-top:15px solid white;
}

<div class="midashi">１．背景色の見出し</div>

.midashi {
padding:0.5em;
background:#CCFFCC;
}

<div class="midashi">２．背景色と下線の見出し</div>

.midashi {
padding:0.5em;
background:#CCFFCC;
border-bottom:solid 3px green;
}

<div class="midashi">３．背景色と左線の見出し</div>

.midashi {
padding:0.5em;
background:#CCFFCC;
border-left:solid 7px green;
}

<div class="midashi">４．立体的な見出し</div>

.midashi {
padding:0.5em;
background:#CCFFCC;
border-bottom:solid 4px #d7d7d7;
}

<div class="midashi">５．左線と立体的な見出し</div>

.midashi {
padding:0.5em;
background:#CCFFCC;
border-bottom:solid 4px #d7d7d7;
border-left:solid 7px green;
}

<div class="midashi">６．周りに影をつけた見出し</div>

.midashi {
padding:0.5em;
background:#CCFFCC;
box-shadow:0 0 13px black;/*数字で影の位置変更*/
}

<div class="midashi">７．ステッチ風の見出し</div>

.midashi {
padding:0.3em;
background:#CCFFCC;
box-shadow:0px 0px 0px 5px #CCFFCC;
border:dashed 2px white;
}

<div class="midashi">８．角折れの見出し</div>

.midashi {
position:relative;
padding:0.5em;
background:#CCFFCC;
}
.midashi:after {
content:'';
position:absolute;
left:0px;
top:0px;
border-width:0 0 15px 15px;
border-style:solid;
border-color:#fff #fff lightgreen;
box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
}

<div class="midashi">９．ステッチで角折れの見出し</div>

.midashi {
position:relative;
padding:0.3em;
background:#CCFFCC;
box-shadow:0px 0px 0px 5px #CCFFCC;
border:dashed 2px white;
}
.midashi:after {
content: '';
position: absolute;
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff lightgreen;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

<div class="midashi">10．上吹き出しの見出し</div>

.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi:after {
content: '';
position: absolute;
top: -70%;
left: 20px;
border: 15px solid transparent;
border-bottom: 15px solid #CCFFCC;
width: 0;
height: 0;
}

<div class="midashi">11．下吹き出しの見出し</div>

.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi:after {
position: absolute;
content: '';
top: 100%;
left: 20px;
border: 15px solid transparent;
border-top: 15px solid #CCFFCC;
width: 0;
height: 0;
}

<div class="midashi">12．タグ風の見出し</div>

.midashi {
background: #CCFFCC;
padding: 0.5em;
line-height: 1.5;
vertical-align:middle;
border-radius: 20px 0px 0px 20px;
}
.midashi:before {
content: '●';
color: white;
margin-right: 8px;
}

<div class="midashi">13．背景がストライプの見出し</div>

.midashi {
text-shadow: 0 0 5px white;
padding: 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #CCFFCC, #CCFFCC 3px,#FFF 3px, #FFF 7px);
background: repeating-linear-gradient(-45deg, #CCFFCC, #CCFFCC 3px,#FFF 3px, #FFF 7px);
}

<div class="midashi">14．ストライプで左線の見出し</div>

.midashi {
text-shadow: 0 0 5px white;
padding: 0.5em;
border-left: solid 7px green;
background: -webkit-repeating-linear-gradient(-45deg, #CCFFCC, #CCFFCC 3px,#FFF 3px, #FFF 7px);
background: repeating-linear-gradient(-45deg, #CCFFCC, #CCFFCC 3px,#FFF 3px, #FFF 7px);
}

<div class="midashi">15．リボン風の見出し１</div>

.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px lightgreen;
}

<div class="midashi">16．尖った見出し</div>

.midashi {
position: relative;
padding: 0.5em 0.5em 0.5em 2.5em;
background: #CCFFCC;
line-height: 1.3;
z-index:-1;
}
.midashi:before {
position: absolute;
content: '';
left: 0px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 70px transparent;
z-index:-2
}

<div class="midashi">17．下線で尖った見出し</div>

.midashi {
position: relative;
padding: 0.5em 0.5em 0.5em 2.5em;
background: #CCFFCC;
border-bottom: solid 3px green;
line-height: 1.3;
z-index:-1;
}
.midashi:before {
position: absolute;
content: '';
left: 0px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 70px transparent;
z-index:-2
}

<div class="midashi">18．下線で両端が尖った見出し</div>

.midashi {
position: relative;
padding: 0.5em 0.5em 0.5em 2.5em;
background: #CCFFCC;
border-bottom: solid 3px green;
line-height: 1.3;
z-index:-1;
}
.midashi:before {
position: absolute;
content: '';
left: 0px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 70px transparent;
z-index:-2
}
.midashi:after {
position: absolute;
content: '';
right: -3px;
top: -7px;
width: 0;
height: 0;
border: none;
border-left: solid 40px transparent;
border-bottom: solid 70px white;
z-index: -1;
}

<div class="midashi">19．背景色がグラデーションの見出し</div>

.midashi {
position: relative;
padding: 0.5em;
background: -webkit-linear-gradient(to right, #CCFFCC, transparent);
background: linear-gradient(to right, #CCFFCC, transparent);
}

<div class="midashi">20．背景色が横グラデーションの見出し</div>

.midashi {
position: relative;
padding: 0.5em;
background: -webkit-linear-gradient(to right, #CCFFCC, #FFFF99);
background: linear-gradient(to right, #CCFFCC, #FFFF99);
}

<div class="midashi">21．背景色が縦グラデーションの見出し</div>

.midashi {
position: relative;
padding: 0.5em;
background: -webkit-linear-gradient(to top, #FFFF99, #CCFFCC); 
background: linear-gradient(to top, #FFFF99, #CCFFCC);
}

<div class="midashi">22．ボックスの見出し</div>

.midashi {
position: relative;
padding: 0.5em;
background: #CCFFCC;
}
.midashi:before {
content: " ";
position: absolute;
top: -16px;
left: 0;
width: -webkit-calc(100% - 16px);
width: calc(100%);
height: 0;
border: solid 8px transparent;
border-bottom-color: #90EE90;
}

<div class="midashi">23．左線と下線の見出し</div>

.midashi {
padding: 0.5em;
background: #CCFFCC;
border-left: solid 5px green;
border-bottom: solid 1px green;
}

<div class="midashi">24．上下に線の見出し</div>

.midashi {
background: #CCFFCC;
padding: 0.5em;
border-top: solid 3px green;
border-bottom: solid 3px green;
}

<div class="midashi">25．リボン風の見出し２</div>

.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi::before,
.midashi::after {
content: '';
position: absolute;
top: 100%;
border-style: solid;
border-color: transparent;
}
.midashi::before {
left: 0;
border-width: 0 15px 15px 0;
border-right-color: lightgreen;
}
.midashi::after {
right: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-top-color: lightgreen;
}

<div class="midashi">26．リボン風の見出し３</div>

.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
}
.midashi::before,
.midashi::after {
content: '';
position: absolute;
top: 100%;
border-style: solid;
border-color: transparent;
}
.midashi::before {
left: 0;
border-width: 0 15px 15px 0;
border-right-color: lightgreen;
}
.midashi::after {
top: -15px;
right: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-bottom-color: lightgreen;
}

<div class="midashi">27．上線と背景グラデーションの見出し</div>

.midashi {
padding: 0.5em;
border-top: solid 3px green;
background: -webkit-linear-gradient(top, #fff 0%, #CCFFCC 100%);
background: linear-gradient(to bottom, #fff 0%, #CCFFCC 100%);
box-shadow: -1px -1px 1px lightgreen inset;
}

<div class="midashi">28．背景に影の見出し</div>

.midashi {
background: #CCFFCC;
padding: 0.5em;
box-shadow: 10px 10px 10px -3px  gray;
font-size:1.5em;
margin:0 0 0 1em;
}

<div class="midashi">頭文字を装飾した見出し</div>

.midashi:first-letter {
font-size: 1.8em;
color: green;
}

<div class="midashi">（アイコン）チェックの見出し</div>

.midashi {
position: relative;
padding-left: 1.2em;
}
.midashi:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: green;
}

<div class="midashi">（アイコン）丸で囲んだ見出し</div>

.midashi {
position: relative;
background: #CCFFCC;
padding: 0.3em 0 0.3em 2.5em;
color: #474747;
border-radius: 0 10px 10px 0;	
}
.midashi:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
display: inline-block;
line-height: 35px;
position: absolute;
padding: 0em;
color: white;
background: green;
width: 45px;
text-align: center;
height: 45px;
left: -0.6em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 5px white; 
border-radius: 50%;
}

<div class="midashi">（アイコン）影付き丸で囲んだ見出し</div>

.midashi {
position: relative;
padding: 0.2em 0 0.2em 2em;
background: #CCFFCC;
color: #474747;
border-radius: 0 10px 10px 0;
}
.midashi0:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
display: inline-block;
line-height: 35px;
position: absolute;
padding: 0em;
color: white;
background: green;
width: 35px;
text-align: center;
height: 35px;
left: -0.6em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 2px 2px 1px silver;
}

<div class="midashi">（アイコン）四角で囲んだ見出し</div>

.midashi {
position: relative;
padding: 0.2em 0 0.2em 1.5em;
background: #CCFFCC;
color: #474747;
border-radius: 0 10px 10px 0;
}
.midashi:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
display: inline-block;
line-height: 30px;
position: absolute;
padding: 0em;
color: white;
background: green;
width: 30px;
text-align: center;
height: 30px;
left: -0.6em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

<div class="midashi">（アイコン）考えごと風な見出し</div>

.midashi {
position: relative;
background: #CCFFCC;
padding: 0.5em;
margin-left: 70px;
border-radius: 15px;
}
.midashi:before {
font-family: "Font Awesome 5 Free";
content: "\f111";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;
font-size: 10px;
left: -50px;
bottom: 0;
color: #CCFFCC;
}
.midashi:after {
font-family: "Font Awesome 5 Free";
content: "\f111";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;
font-size: 20px;
left: -30px;
bottom: 0;
color: #CCFFCC;
}

<div class="midashi">先頭に大きな●の見出し</div>

.midashi {
position: relative;
text-shadow:0 0 10px white;
}
.midashi:before {
content: "";
position: absolute;
background: yellowgreen;
width: 2em;
height: 2em;
border-radius: 50%;
top: 50%;
left: -10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}

<div class="midashi">先頭に大きな●で背景ありの見出し</div>

.midashi {
position: relative;
padding: 0.2em;
text-shadow:0 0 10px white;
background: #CCFFCC;
z-index: -4;
border-radius: 0 10px 10px;
}
.midashi:before {
content: "";
position: absolute;
background: yellowgreen;
width: 2em;
height: 2em;
border-radius: 50%;
top: 50%;
left: -10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}

<div class="midashi">ポストイット風の見出し</div>

.midashi {
position:relative;
display:inline-block;
padding: 0.5em;
background-color: #CCFFCC;
border-radius: 2px;
border-left: solid 7px green;
width:50%;
}
.midashi:before {
content:  '';
background-color: #b3b3b3;
display: block;
position:absolute;
left: 51%;
height: 60%;
top: 30%;
z-index:  -1;
width: 46%;
box-shadow: 0 0 4px 8px #b3b3b3;
transform: rotate(1deg);
}

<div class="midashi"><span class="midashi-point">先</span>頭の文字が●の中の見出し１</div>

.midashi {
position:relative;
padding: 0.5em;
}
.midashi-point {
background-color: green;
border-radius:100%;
padding:5px;
color: #fff;
margin-right:2px;
}

<div class="midashi"><span class="midashi-point">先</span>頭の文字が●の中の見出し２</div>

.midashi {
position:relative;
padding: 0.5em;
}
.midashi-point {
background-color: green;
border-radius:50%;
padding:10px;
font-size: 1.5em;
color: #fff;
margin-right:5px;
}

<div class="midashi">背景に▲の見出し</div>

.midashi {
position:relative;
padding:0.5em;
}
.midashi:before {
content:'';
width:0;
height:0;
border-style:solid;
border-width:20px 30px 60px 10px; 
border-color:transparent transparent #CCFFCC transparent;
position:absolute;
z-index:-1;
transform: rotate(60deg);
top:-20px;
left:30px;
}

<div class="midashi"><span>上に文字</span>上に文字の見出し</div>

.midashi{
padding:0.5em;
}
.midashi span {
display:block;
margin-bottom:0.2em;
color:#aaa;
font-size:0.7em;
}

<div class="midashi">背景色の見出し</div>

.midashi {
position: relative;
padding: 0.5em;
background: #CCFFCC;
line-height: 1.4;
border-radius: 0 5px 5px 
}
.midashi:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',serif;
content: '\f00c チェック';
font-weight: 900;
background: green;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px;
font-size: 0.7em;
line-height: 1.2;
letter-spacing: 0.05em;
}

<div class="midashi">囲んだ見出し</div>

.midashi {
position: relative;
padding: 0.5em;
line-height: 1.4;
border: solid 3px green;	
}
.midashi:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',serif;
content: '\f0eb  ポイント';
font-weight: 900;
background: green;
color: #fff;
left: -2px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px;
font-size: 0.7em;
line-height: 1.2;
letter-spacing: 0.05em;
}

<div class="midashi">上下に線の見出し</div>

.midashi {
position: relative;
padding: 0.5em 0;
border-top: solid green 3px;
border-bottom: solid green 3px;
}
.midashi:after {
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',serif;
content: '\f007  コメント';
font-weight: 900;
background: green;
color: #fff;
left: -2px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px;
font-size: 0.7em;
line-height: 1.2;
letter-spacing: 0.05em;
}