2020.4.24

cssで可変できる線の作り方【点線 / 中黒レスポンシブ】

  • CSS
  • WEB
cssで可変できる線の作り方【点線 / 中黒レスポンシブ】

テキストの大きさはそのままに、間にある線だけが可変するcssです。

例えば、メニューリストの項目と金額の間にある中黒などに使うと便利。コピペしてすぐ使えます。

 

See the Pen
MWapJWZ
by nanami (@nanami_po)
on CodePen.

 

CSS解説

ざっとCSSを見るとこのようになります。

cssで可変できる線の作り方【点線 / 中黒レスポンシブ】

 

中黒の大きさを変えたい場合は .line のbackgroundとheightの数値を変えます。全部同じpx数を指定することで、きれいな●(中黒)になります。

 

これでレスポンシブ可能なラインが間にできました。

お疲れ様でした。よかったら参考にしてください。

Share Please

Read this too