diff options
author | Bradley Taunt <bt@btxx.org> | 2024-06-06 08:05:12 -0400 |
---|---|---|
committer | Bradley Taunt <bt@btxx.org> | 2024-06-06 08:05:12 -0400 |
commit | 6b742c459266b18e2b375b35205ce8a6c02f0452 (patch) | |
tree | b16fbb9a045e33dd6c97eb5ab72e6ff4d9237ea3 /posts/first-letter.md |
Initial commit
Diffstat (limited to 'posts/first-letter.md')
-rw-r--r-- | posts/first-letter.md | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/posts/first-letter.md b/posts/first-letter.md new file mode 100644 index 0000000..e1768d5 --- /dev/null +++ b/posts/first-letter.md @@ -0,0 +1,33 @@ +# 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](https://codepen.io/bradleytaunt/pen/gJYbev/) + + + |