From e417a818e207a6cca6e2f3c471611673ab836a62 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Sat, 25 May 2024 16:14:03 -0400 Subject: Initial commit for Jekyll testing and conversion, updated --- _posts/2019-05-03-first-letter.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 _posts/2019-05-03-first-letter.md (limited to '_posts/2019-05-03-first-letter.md') diff --git a/_posts/2019-05-03-first-letter.md b/_posts/2019-05-03-first-letter.md new file mode 100644 index 0000000..8cd34d6 --- /dev/null +++ b/_posts/2019-05-03-first-letter.md @@ -0,0 +1,36 @@ +--- +layout: post +title: "First Letter Pseudo Element" +date: 2019-05-03 +--- + + +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: + + +
+

It was a bright cold day in April, and the clocks were striking thirteen.

+
+ + +## The CSS + +Here's where the magic happens: + + + p:first-letter { + color: orangered; + font-size: 250%; + } + + +## Live CodePen + +[Live CodePen Example](https://codepen.io/bradleytaunt/pen/gJYbev/) + + + -- cgit v1.2.3-54-g00ecf