<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.