Mini CSS trick: emoji page dividers with the content property

#css #webdev #tutorial

Page divider graphics are a common way to break up blocks of text on a web page, creating negative space that helps a page feel less busy and can signal a change in topics. They're basically the fancier sibling of a horizontal rule, and often look like a curly swash or a few geometric shapes. In print books, they're often used to separate chapters or scenes.

Dividers by Vecteezy user onfocus onfocus.

I wanted to whip up a simple graphical page divider to put the finishing touches on my current project, but I didn't want to take time looking for images to use. Then it hit me that I could just use an emoji as a divider instead! My page is about red pandas (it's actually my tribute page for this freeCodeCamp project), which there isn't a specific emoji for (yet!), but the photos on the page do feature plenty of bamboo, so I picked this cute bamboo kadomatsu emoji: 🎍

Method

Start making your divider by placing an empty paragraph in your HTML at whatever points you want to insert a divider, and make sure to give that paragraph a class, like divider.

..... </article>

<p class="divider"></p>

<article> ... </article>

<p class="divider"></p>

<article> ......

I started out by actually pasting the emoji into the body of each paragraph, but then I realized there's a better way: the content CSS property!

If you're unfamiliar, [content](https://developer.mozilla.org/en-US/docs/Web/CSS/content) can be used with the ::before and ::after pseudo-selectors to add extra content inside an HTML tag. It's great because it lets you apply the Don't Repeat Yourself principle to your HTML a little bit: if you want to change up the divider (say, to a different emoji), instead of manually editing each paragraph element in your HTML file, you can change it just once in the CSS rule.

We'll use a .divider::after selector to insert the emoji.

.divider::after {
  content: "🎍";
}

Now you should see the dividers on your page! But they're probably not doing a very good job of dividing anything, just sitting right on top of your content, at the beginning of the line.

Let's style .divider to make them more useful. Dividers are typically centered on the page, so we'll use text-align and margin: auto. Also, a divider's purpose is to create space, so let's add some top and bottom margin.

.divider {
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

And that's it! The dividers should be nicely behaved now and creating plenty of negative space on your page.

Warnings

MDN notes that you should always use the Unicode escape sequence for non-Latin characters, though in my testing, just pasting the emoji itself into the CSS worked fine for my browser.

But if you want to play it safe, you can find the escape sequences by looking up your emoji on Emojipedia. Look for the emoji's codepoint--you can find it in the right-hand column on this overview page, or if you're on the page for an individual emoji, scroll down below all the example images to find the Codepoint heading. The codepoint should look something like U+1F38D. Copy just the hexadecimal value after the plus sign, and prefix it with a backslash to make the escape sequence, e.g. \1F38D.

.divider::after {
  content: "\1f38d"; /*🎍*/
}

(I included a comment with the actual emoji character so that I'll remember what the escape sequence refers to when I'm looking at the code without a preview later.)

When you design with emoji, it's also important to keep in mind that they'll appear differently on every device, and even the colors might be completely different from one system to another. So I don't recommend using this idea on pages that have a very strict color scheme.

Inspiration

It's super easy to change up the emoji since we used content, so why not play around with a few different designs? You can use more than a single emoji, too--try repeating the same emoji with spaces in between, or making a pattern of different emoji. If you do combine multiple emoji, keeping the pattern symmetrical will help maintain a tidy look that's more in line with traditional page dividers, but breaking the rules is fun too!

🎵   🎵   🎵
📕   📘   📗   📙
✨🔻🏳️‍⚧️🔻✨
🧦👗🩳👚🧣👖🧥👟
🌒🌓🌔🌕🌖🌗🌘

I went with an emoji that was related to my content, but there are also plenty of basic shape emoji that would work very nicely as generic dividers for any page.

➖🔆➖
◼   ⚜   ◼  
🔺🔻🔺🔻🔺
🔸 🔷 🔸 💠 🔸 🔷 🔸

You can even apply this method to other types of decorative "text" beyond emoji. How about a kaomoji divider? Or a single ampersand in a fancy font? There are plenty of symbol or swash fonts out there to try, too.

Conclusion

I hope you enjoy using this little trick to quickly add some visual interest to your web pages! I'd love to see your emoji divider designs or how you use it in your projects.

This is my first dev.to post, so I would be very grateful for any feedback you have on it! Please let me know if anything is unclear, and feel free to ask any questions to might have.