項目一覧
項目一覧(以上)
水平線の中に文字を表示させる
CSSスタイル設定を利用すると、水平線の中に文字を表示させることができる。
h5 {
overflow: hidden;
text-align: center;
}
h5 span {
display: inline-block;
padding: 0 0.5em;
position: relative;
}
h5 span:before,
h5 span:after {
border-top: 1px solid;
content: “”;
position: absolute;
top: 50%;
width: 99em;
}
h5 span:before {
right: 100%;
}
h5 span:after {
left: 100%;
}
.h300{line-height:300%;}
.border1 {
border-top-width: 1pt;
border-bottom-width: 1pt;
border-color: grey;
border-top-style: solid;
border-right-style: none;
border-bottom-style:solid;
border-left-style:none ;
}
<div class=”item5″ id=”horizon”>水平線の中に文字を表示させる</div>