CSS: Add ::first-letter pseudo-element (#21009)
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 😛.
This commit is contained in:
38
guide/english/css/selectors/pseudo/first-letter/index.md
Normal file
38
guide/english/css/selectors/pseudo/first-letter/index.md
Normal file
@ -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/)
|
Reference in New Issue
Block a user