From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/first-letter/index.html | 37 ++++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) (limited to 'build/first-letter') diff --git a/build/first-letter/index.html b/build/first-letter/index.html index 9efd443..22e0663 100644 --- a/build/first-letter/index.html +++ b/build/first-letter/index.html @@ -1,36 +1,47 @@ - + First Letter Pseudo Element - - + + +
-

First Letter Pseudo Element

+

First Letter Pseudo Element

+

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

+ +

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>
+
+
<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:

+
+
The CSS

+
+
Here’s where the magic happens:

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

-
Live CodePen

+
+
Live CodePen

+
 
Live CodePen Example