aboutsummaryrefslogtreecommitdiff
path: root/_posts/2019-05-03-first-letter.md
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-05-25 16:14:03 -0400
committerBradley Taunt <bt@btxx.org>2024-05-25 16:16:54 -0400
commite417a818e207a6cca6e2f3c471611673ab836a62 (patch)
tree664686a365c3d1e73349b5a667fa892f46445fef /_posts/2019-05-03-first-letter.md
Initial commit for Jekyll testing and conversion, updated
Diffstat (limited to '_posts/2019-05-03-first-letter.md')
-rw-r--r--_posts/2019-05-03-first-letter.md36
1 files changed, 36 insertions, 0 deletions
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:
+
+
+ <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](https://codepen.io/bradleytaunt/pen/gJYbev/)
+
+
+