はじめに

HP制作をしている駆け出しエンジニアです。
borderの長さを文字に合わせるためのCSSがあるのをご存知ですか？

今回始めて知ったので備忘録として記録します📝

文字の長さに合わせてborderの長さを調整する

今回、下記のスクリーンショットのように、
文字の周りを線で囲み、ボタンのように見せるCSSを実装しようとしていました。

文字の長さに合わせて横幅を調整するには、width:fit-contentを使用します。

HTML

<p class="tag">お知らせ</p>

CSS

/* タグ */
.tag {
  font-weight: normal;
  color: #A9A9A9;
  font-size: 16px;
  border: 1px solid #A9A9A9;
  border-radius: 19px;
  height: 22px;
  width: fit-content; /* これを追加 */
  margin: 3px 10px;
}

上記のようにCSSプロパティを追加することで、文字の長さに合わせてborderの長さを調整できます!!

以上、参考になれば幸いです。