【CSS】最初の1行だけ【セレクター】

最初の一行だけに適用

最初の一行にだけスタイルを当てるCSSセレクター「first-line」があります。

例えば以下のようなHTMLがあったとして、

<p>
  この文章はダミーです。<br>
  文字の大きさ、量、字間、行間等を<br>
  確認するために入れています。
</p>

これを最初の一行「この文章はダミーです。」のテキストにだけCSSを適用させることができます。

CSSがこちら⬇

p::first-line {
    font-weight: bold;
}

疑似要素の::first-lineを使って最初の一行にだけスタイルを当てることができます。

あくまで最初の1行のみなので、画面を狭くして改行されてしまった場合、折り返した先の文字にはスタイルが適用されませんのでご注意を。

この記事を書いた人

けいた

高校卒業してから15年間勤めた会社を退職→脱サラしてWeb制作。
現在はWordPressサイト構築とShopifyストア構築をメインに、副業で物販をやっています。