CSSで二重線を引く方法【現役エンジニアが解説】
今回は、CSSで二重線を引く方法について、3種類に分け、簡単に解説していきます。
枠
二重線の枠を引くには、borderプロパティを使います。
borderプロパティのスタイルには二重線のdoubleを指定します。
.hoge{ border:double 10px #000000; }
上記のコードでは、borderプロパティで要素の周りに二重線の枠を引いています。
下線
二重線の下線では、border-bottomプロパティを使用します。
border-bottomプロパティのスタイルには二重線のdoubleを用います。
.hoge{ border-bottom:double 10px #000000; }
上記のコードでは、border-bottomプロパティで要素に対し、二重線の下線を引いています。
打ち消し線
二重線の打ち消し線を引くためには、2つの擬似要素で表現します。
:beforeのborder-topプロパティ、:afterのborder-bottomプロパティで線を引きます。
.hoge{ display:inline-block; position:relative; } .hoge:before{ content:''; width:100%; height:1px; border-top:solid 1px #000000; position:absolute; left:0; top:calc(50% - 2px); } .hoge:after{ content:''; width:100%; height:1px; border-bottom:solid 1px #000000; position:absolute; left:0; bottom:calc(50% - 2px); }
上記のコードでは、:beforeのborder-topプロパティと:afterのborder-bottomプロパティで、要素に打ち消し線を引いています。