From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/first-letter/index.html | 55 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 build/first-letter/index.html (limited to 'build/first-letter') diff --git a/build/first-letter/index.html b/build/first-letter/index.html new file mode 100644 index 0000000..9efd443 --- /dev/null +++ b/build/first-letter/index.html @@ -0,0 +1,55 @@ + + + + + + + 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

+

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

+

Live CodePen Example

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf