First letter pseudo element

In today’s TypeTip™ we will be taking a look at the often overlooked :first-letter CSS pseudo element. Though you might only use this for specific article-format web pages, it’s still a nice-to-have in your web dev toolset.

The HTML

Like most pseudo …


This content originally appeared on Ugly Duck and was authored by Bradley Taunt

In today’s TypeTip™ we will be taking a look at the often overlooked :first-letter CSS pseudo element. Though you might only use this for specific article-format web pages, it’s still a nice-to-have in your web dev toolset.

The HTML

Like most pseudo elements, nothing has to change with your pre-existing HTML structure:

<article>
    <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
</article>

The CSS

Here’s where the magic happens:

p:first-letter {
    color: orangered;
    font-size: 250%;
}

Live CodePen

See the Pen First Letter Pseudo Element by Bradley Taunt (@bradleytaunt) on CodePen.


This content originally appeared on Ugly Duck and was authored by Bradley Taunt


Print Share Comment Cite Upload Translate Updates
APA

Bradley Taunt | Sciencx (2019-05-03T00:00:00+00:00) First letter pseudo element. Retrieved from https://www.scien.cx/2019/05/03/first-letter-pseudo-element/

MLA
" » First letter pseudo element." Bradley Taunt | Sciencx - Friday May 3, 2019, https://www.scien.cx/2019/05/03/first-letter-pseudo-element/
HARVARD
Bradley Taunt | Sciencx Friday May 3, 2019 » First letter pseudo element., viewed ,<https://www.scien.cx/2019/05/03/first-letter-pseudo-element/>
VANCOUVER
Bradley Taunt | Sciencx - » First letter pseudo element. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/05/03/first-letter-pseudo-element/
CHICAGO
" » First letter pseudo element." Bradley Taunt | Sciencx - Accessed . https://www.scien.cx/2019/05/03/first-letter-pseudo-element/
IEEE
" » First letter pseudo element." Bradley Taunt | Sciencx [Online]. Available: https://www.scien.cx/2019/05/03/first-letter-pseudo-element/. [Accessed: ]
rf:citation
» First letter pseudo element | Bradley Taunt | Sciencx | https://www.scien.cx/2019/05/03/first-letter-pseudo-element/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts