xaringan first-letter

I recently saw the use of the ::first-letter pseudo selector and I was hooked! and I was hooked! This selector allows you to style the first letter in a block, sometimes called a drop cap, and can be used to add a little flair to your xaringan slides. These selectors can just as well be used in any other Html output, they are not limited to xaringan.

You can either add the pseudo selector to an existing class, but I’m going to add a new CSS class so I can apply it whenever I want. Below is a class called .drop-cap that doesn’t do anything by itself, but has a ::first-letter pseudo selector that doubles the font-size of the first letter.

.drop-cap::first-letter {
  font-size: 200%;
}

Next, we have the information we are putting in the slide

.drop-cap[ # Sample Header]

.drop-cap[ > All the .drop-cap[statistics] in the world can’t measure the warmth of a smile.]

.drop-cap[ Duis vel viverra elit, eget hendrerit odio. Curabitur cursus elit nec diam vulputate, nec sollicitudin nunc ornare. Ut mi lectus, aliquet non ligula sed, lobortis vehicula erat. Morbi porttitor orci ut semper dapibus. Donec sodales tellus varius tortor varius, ornare commodo augue maximus. Vestibulum quis bibendum mi, sit amet lobortis leo. Morbi vulputate orci arcu, ac lobortis sapien gravida eget. Nulla non interdum orci, nec congue ligula.]

And the result:

and look, each of the first letters of the selected blocks has had their size doubled. Notice that while the word statistics had a .drop-cap around it, it remained unchanged, this is because ::first-letter only works on blocks.

We can also get a little bit fancier with our styling to create nice-looking drop caps, next example is inspired by this video by Ethan Marcotte.

.drop-cap::first-letter {
  color: #B22222;
  float: left;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

Here we get a nice drop cap that spans multiple lines.

Lastly, there is also a related selector called first-line that works in just the same way as ::first-letter except that it applies the style to the entire first line.

.super-line::first-line {
  color: #B22222;
  font-size: 120%;
  font-weight: bold;
}

I hope you can use these two selectors to add a little something special to your next set of xaringan slides!