##### [The CSS Podcast - 014: Pseudo-elements](https://thecsspodcast.libsyn.com/014-pseudo-elements) If you've got an article of content and you want the first letter to be a much bigger drop cap--- how do you achieve that? ![A couple of paragraphs of text with a blue drop cap](https://web.dev/static/learn/css/pseudo-elements/image/a-couple-paragraphs-tex-c9d26a842603e.svg) In CSS, you can use the `::first-letter` pseudo-element to achieve this sort of design detail. p::first-letter { color: blue; float: left; font-size: 2.6em; font-weight: bold; line-height: 1; margin-inline-end: 0.2rem; } A pseudo-element is like adding or targeting an extra element without having to add more HTML. This example solution, using `::first-letter`, is one of many pseudo-elements. They have a range of roles, and in this lesson you're going to learn which pseudo-elements are available and how you can use them. ## `::before` and `::after` Both the [`::before`](https://developer.mozilla.org/docs/Web/CSS/::before) and [`::after`](https://developer.mozilla.org/docs/Web/CSS/::after) pseudo-elements create a child element inside an element **only** if you define a `content` property. .my-element::before { content: ""; } .my-element::after { content: ""; } The `content` can be any string ---even an empty one--- but be mindful that anything other than an empty string will likely be announced by a screen reader. You can add an image `url`, which will insert an image at its original dimensions, so you won't be able to resize it. You can also insert a [`counter`](https://developer.mozilla.org/docs/Web/CSS/counter()). > [!IMPORTANT] > **Key term:** You can create a named counter and then increment it, based on its position in the document flow. There's all sorts of contexts where they can be really useful, such as automatically numbering an outline. Once a `::before` or `::after` element has been created, you can style it however you want with no limits. You can only insert a `::before` or `::after` element to an element that will accept child elements ([elements with a document tree](https://www.w3.org/TR/CSS21/generate.html)), so elements such as ``, `