Css-pseudo-element-first-line

提供:Dev Guides
移動先:案内検索

CSS-擬似要素:最初の行

説明

_:first-line_疑似要素は、テキストの最初の行に特殊効果を追加するために使用されます。

次のプロパティは、この擬似要素に適用されます-

  • フォントのプロパティ
  • 色のプロパティ
  • 背景のプロパティ
  • 単語間隔
  • 文字間隔
  • テキスト装飾
  • 垂直に整列
  • テキスト変換
  • 行の高さ
  • クリア

以下は、_:first-line_要素を使用してドキュメント内の要素の最初の行に特殊効果を追加する方法を示す例です。

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs
         to nline class.
      </p>

      <p>
         The first line of this paragraph will be underlined as defined in the
         CSS rule above. Rest of the lines in this paragraph will remain normal.
         This example shows how to use :first-line pseduo element to give effect
         to the first line of any HTML element.
      </p>
   </body>
</html>

これは、次の黒いリンクを生成します-