From 87229bc075e016d6c293edb25151d192428ff0f1 Mon Sep 17 00:00:00 2001
From: Taylor Stauss <15224340+ttstauss@users.noreply.github.com>
Date: Sun, 4 Nov 2018 19:24:37 -0700
Subject: [PATCH] CSS: Add ::first-letter pseudo-element (#21009)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is a basic introduction to the ::first-letter pseudo-element CSS selector. This document is meant to be a starting point and should be added to/expounded on.

P.S. I tried submitting a doc for the ::before selector, but apparently, it was already created, however, it's nowhere to be found in this directory (css/selectors/pseudo/). I wonder if a consolidation is in order 😛.
---
 .../selectors/pseudo/first-letter/index.md    | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 guide/english/css/selectors/pseudo/first-letter/index.md

diff --git a/guide/english/css/selectors/pseudo/first-letter/index.md b/guide/english/css/selectors/pseudo/first-letter/index.md
new file mode 100644
index 0000000000..52fb2aa08c
--- /dev/null
+++ b/guide/english/css/selectors/pseudo/first-letter/index.md
@@ -0,0 +1,38 @@
+---
+title: First-Letter
+---
+## First-Letter
+ The ```::first-letter``` CSS pseudo-element styles the first letter of a slected HTML element.
+ General Syntax:
+ ```css
+::first-letter
+```
+ ## Example
+ ```css
+/* First letter of every paragraph is set to 50px */
+p::first-letter {
+  font-size: 50px;
+}
+```
+ ## More Examples
+ A great example of a practical use case is if you wanted to make make the first letter in a paragraph large or decorative (commonly known as drop caps).
+ ```html
+<p class="drop-caps">Join a community of millions of people learning to code together. Meet coders in your city. Get experience by coding for nonprofits. Level up your career.</p>
+```
+ ```css
+.drop-caps::first-letter {
+  background: repeating-linear-gradient(45deg, #85144b4f, #85144b4f 10px, #fff 10px, #fff 20px);
+  border: 2px solid;
+  color: #85144b;
+  float: left;
+  font-family: 'Times New Roman';
+  font-size: 100px;
+  line-height: 80px;
+  margin-right: 10px;
+  padding: 4px;
+}
+```
+ #### More Information:
+* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter)
+* [W3 Schools](https://www.w3schools.com/cssref/sel_firstletter.asp)
+* [CSS Tricks - Drop Caps](https://css-tricks.com/snippets/css/drop-caps/)