2020.4.24 ／ 更新日：
2022.1.10
HTML･CSS cssで可変できる線の作り方【点線 / 中黒レスポンシブ】
テキストの大きさはそのままに、間にある線だけが可変するcssです。
例えば、メニューリストの項目と金額の間にある中黒などに使うと便利。コピペしてすぐ使えます。
See the Pen
MWapJWZ by nanami (@nanami_po)
on CodePen.
CSS解説
ざっとCSSを見るとこのようになります。
中黒の大きさを変えたい場合は .line のbackgroundとheightの数値を変えます。全部同じpx数を指定することで、きれいな●(中黒)になります。
これでレスポンシブ可能なラインが間にできました。
お疲れ様でした。よかったら参考にしてください。
関連記事
