【CSS】要素の内側に線を引く方法（疑似要素after、outline-offset、box-sizing）

2022.6.22

【CSS】要素の内側に線を引く方法（疑似要素after、outline-offset、box-sizing）

CSSで内側に線を引く方法を解説します。

疑似要素afterを使う方法

See the Pen <a href="https://codepen.io/Uchaaan/pen/KKQjKYO"> 内側に線を入れる方法（疑似要素after使用）</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>. 
一番便利な方法かと思います。
・元になる要素にposition: relative;を忘れずに入れましょう。
・top、right、bottom、leftで位置を調整します。

outline-offsetを使う方法

See the Pen <a href="https://codepen.io/Uchaaan/pen/yLvdyOY"> 内側に線を入れる方法（outline-offset使用）</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>. 
・oulineは要素を縁取りするプロパティです。
・outline-offsetはoulineの開始位置を指定するプロパティです。
outline-offsetに線の分だけマイナス値を指定することで内側に枠線を表示することができます。
※テキストをセンター寄せの場合は良いですが、左寄せの場合、線と被ります。
画像の内側に半透明の線を入れる場合には良いかもしれません。

box-sizingを使う方法

See the Pen <a href="https://codepen.io/Uchaaan/pen/ZErdYQW"> 内側に線を入れる方法（box-sizing使用）</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>. 
・要素のサイズを変えずに線を引けます。
・テキストや画像とは被らない。

いかがでしょうか。
個人的にはどれも使いますが、疑似要素が一番使いやすいと感じています。
是非いろいろと試してみてください。