עיצוב האות הראשונה ב CSS בעזרת first-letter::

::first-letter הוא עוד psuedo element (פסאודו אלמנט) נחמד שמאפשר לכם לעצב את האות הראשונה בטקסט הנמצא באלמנט כלשהו ללא הצורך לשנות את ה HTML או להוסיף תגית כלשהי כמו span למשל. המתודה עובדת באופן זהה לסיטואציה בה עטפתם את האות הראשונה עם תגית כלשהי.

הצורה המסורתית והישנה לעיצוב האות הראשונה נראית כך:

HTML

<p>
    <span class="first-letter-style">ה</span>אות הראשונה היא גדולה וכתומה.
</p>

CSS

.first-letter-style{
    font-size: 30px;
    color: #c54088;
}

והתוצאה תראה בסגנון הבא:

אך דרך פשוטה יותר לעשות זאת היא באמצעות אותו psuedo element בשם ::first-letter כבדוגמה הבאה:

HTML

<p class="first-letter-pseudo">
     האות הראשונה היא גדולה וכתומה.
</p>

CSS

.first-letter-pseudo::first-letter {
    font-size: 30px;
    color: #c54088;
}

והתוצאה תהיה זהה לדוגמה הראשונה:

תמיכת דפדפנים

עד כאן. אם אתם בענייני CSS תנו מבט בסלקטורים חדשים שיגיעו אלינו ב ״CSS4״ – ויש סיבה מגוע אני רושם זאת במרכאות… 🙂