CSS ::first-letterで最初の1文字目にCSSを適用するサンプル

2022年11月7日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
要素::first-letter{cssコード}
::first-letter は CSS の擬似要素で、ブロックレベル要素の最初の行の最初の文字にスタイルを適用します。
first-letterを使って、最初の1文字目にCSSを適用します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
/*最初の1文字目にCSSを適用*/
 .cft::first-letter{
     color:red;
     font-size: 230%;
  }
</style>
</head>
<body>

<p class="cft">
  tokyo<br />
  oosaka
</p>
</body>
</html>

結果
最初の1文字目「t」にcss(色red サイズ200%)を適用します

CSS

Posted by arkgame