30-seconds-of-code/drop-cap.md at a405c227caa6d42051fabdeed9e44a51ce35bcb4

Files

Terence Huynh a405c227ca Add Drop Cap Snippet

2018-10-13 15:47:30 +11:00

1.7 KiB

Raw Blame History

Drop cap

Makes the first letter in the first paragraph bigger than the rest of the text, and below the first line of said first paragraph. Often used to signify the beginning of a new section.

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo
  ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit.
  Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero,
  rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet
  congue erat sodales commodo. Donec magna erat, imperdiet non odio sed, sodales
  tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque
  efficitur.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo
  ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit.
  Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero,
  rhoncus tincidunt ante dictum at.
</p>

CSS

p:first-child::first-letter {
  color: blue;
  float: left;
  margin: 0 12px 3px 0;
  font-size: 72px;
  font-weight: bold;
  line-height: 1;
}

Demo

Explanation

The ::first-letter pseudo selector selects the first "letter" of text within an element (in this case, the <p> element). Coupled with the use of :first-child selector before ::first-letter ensures that we only affect the very first paragraph instead of all paragraphs.
float: left is applied so that it appears "dropped" within the paragraph.

Browser support

✅ No caveats.

https://caniuse.com/#feat=first-letter

1.7 KiB Raw Blame History