区切り線 hr

hrはHorizontal Rule（水平方向の罫線）の略です。

 

ふつうの線

HTML
<hr>


01-色をつけた線

HTML
<hr class="sen01">

CSS
.sen01 {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #43a047;
}


02-細い点線

HTML
<hr class="sen02">

CSS
.sen02 {
border-width: 1px 0 0 0;
border-style: dashed;
border-color: #ffb300;
}


03-細い点線Ⅱ

HTML
<hr class="sen03">

CSS
border-width: 1px 0 0 0;
border-style: dotted;
border-color: #1e88e5;
}


04-２本線

HTML
<hr class="sen04">

CSS
.sen04 {
border-width: 3px 0 0 0;
border-style: double;
border-color: #ff6f00;
}


05-グラデーション

HTML
<hr class="sen05">

CSS
.sen05 {
position: relative;
height: 2px;
border-width: 0;
background-color: #00bcd4;
background-image: -webkit-linear-gradient(left,
#00bcd4 0%,#283593 50%,#00bcd4 100%);
background-image: linear-gradient(90deg,
#00bcd4 0%,#283593 50%,#00bcd4 100%);
}


06-背景に色

HTML
<hr class="sen06">

CSS
.sen06 {
border-top: 2px dashed #9dd1ff;
background-color: #56b0ff;
}


07-切り取り線

HTML
<hr class="sen07">

CSS
.sen07 {
border-top: 1px dashed #008b8b;
}
.sen07:after {
content: '\002702';
display: inline-block;
position: relative;
top: -12px;
left: 40px;
padding: 0 3px;
background: #fff;
color: #008b8b;
font-size: 18px;
}