「一文字だけ雑誌の様におしゃれに大きく表示したい」直ぐに解決可能です

- 「海外の雑誌のように一文字目だけ大きくおしゃれに表示したい!」
そんな時ありませんか? cssを編集すれば直ぐに解決可能です。
「::first-letter」セレクタを使用
cssには「このためだけにあるんじゃないか?」ってぐらいドンピシャなセレクタ「::first-letter
」があります。
とりあえず基本の設定
.first::first-letter{
float: left;
padding: 0;
line-height: 1em;
font-size: 4em;
font-weight: bold;
}
上記css
を適用すると下記のように表示されます。
テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。
あとは好みで上記css
を編集して下さい。