A Simple Way to Add Emoji Paragraph Markers

How to add emoji markers to and automatically indent a paragraph of text with two simple CSS rules, and without using lists or pseudo-elements.

This is a paragraph of plain text. It uses the default style rules for my weblog and there’s nothing special about it. But sometimes you want to plus things up a bit.

⚽ This paragraph is indented and has a soccer ball emoji as a marker, sort of like a list marker. It looks nice and the indented left margin makes the emoji really pop. I used to think doing this was really hard, but it’s not.

I use “marked” paragraphs like this a lot in my blog posts, especially in my Weeknotes dispatches. I’ve tried several different approaches for doing this.

Just slam an emoji in there

The most straightforward way is simply to insert an emoji at the beginning of the paragraph:

😦 Here is an paragraph of text that has an emoji at the beginning. It’s fine, but doesn’t look too good when the paragraph’s text spans multiple lines, as this one’s does. As you can see, the text is not all indented and the emoji doesn’t stand out.

Use a list

Another way is to make the paragraph a list item. In markdown this is really simple, we just add a hyphen (-) or an asterisk (*) at the beginning:

🫤 This text is inside a list item. The nice thing about this approach is that the text is indented and the list marker helps draw attention to the emoji, but having both looks cluttered.

I’ve shared previously how to add emojis as list item markers, but there are some issues with that approach. First, you can’t mix marked and unmarked paragraphs. Second, it requires that you create a special CSS rule for every emoji you intend to use. Finally, you have to add a bunch of extra HTML to mark up the text in a list. And that sort of defeats the purpose of using markdown!

How To

1. Add these CSS rules to your stylesheet

p:has(span.pe) {
  position: relative;
  margin-left: 2em;
}

span.pe {
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  left: -2em;
  top: 0;
}

The first rule adjusts the left margin of the paragraph text if the paragraph is “marked.” Note that I don’t need a completely separate rule for marked paragraphs, just two small adjustments.

The second rule positions the marker itself, relative to the paragraph text.

2. Add the marker

To “mark” a paragraph, you just need to add this short HTML snippet:

<span class="pe">⚽</span>

The “marker span” (as I call it) can have any emoji you like, but only one. The span can be at the beginning of a marked paragraph, or at the end, or anywhere in between.

Simplify Even More

If you use weblog.lol you can make this a little bit easier by adding a custom tag to your configuration, as follows:

PE: <span class="pe">$emoji</span>

To use it, you can add the tag with an argument to markdown paragraph text, like this:

{pe:emoji=⚽️} Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vestibulum eget
nisl odio. Aliquam ac sagittis leo, vitae
hendrerit risus. Proin ac congue lacus.

But wait, there’s more!

With this approach, we’re not limited to emojis. The marker span can contain any character you want. You can even put small (“emoji-like”) inline images in there:

<span class="pe"><img class="emoji" src="..."></span>

This is a paragraph marked with a small inline image, which happens to be the NBC Peacock logo. I like to use SVGs for this, but any image format will work.

You will need an additional CSS rule to make sure the image is sized and positioned correctly. Here is the rule I use:

img.emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 0;
  vertical-align: middle;
  margin-block-start: calc(1ex - 1cap);
}