Css-pseudo-element-first-letter

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

CSS-擬似要素:first-letter

説明

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

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

  • フォントのプロパティ
  • 色のプロパティ
  • 背景のプロパティ
  • マージンのプロパティ
  • パディングのプロパティ
  • 境界線のプロパティ
  • テキスト装飾
  • 垂直に整列
  • テキスト変換
  • 行の高さ
  • 浮く
  • クリア

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

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 3em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and
         will have font size 10 px;
      </p>

      <p>
         The first character of this paragraph will be 5em big and in red
         color as defined in  the CSS rule above. Rest of the characters in
         this paragraph will remain normal. This example shows how to use
         :first-letter pseudo element to give effect to the first
         characters of any HTML element.
      </p>
   </body>
</html>

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