Using CSS Pseudo-Elements and HTML Entities

4 min readJan 24, 2019

I am being propelled to write this based on a question someone was seeking an answer to on Facebook on how to display a symbol in a button. I hope this serves for anyone wondering how this is achieved as well. Below is the question posted:

Okay, let’s get our hands dirty with CSS Pseudo-elements and HTML Entities.

First, let’s boost our understanding by defining these terms:

Pseudo-Elements:

They are used to add special effects or style to selectors. They are plain CSS with no JavaScript. The basic syntax for pseudo-elements is this:

selector::pseudo-element {
property:value;
}

The commonly used pseudo elements are:

::first-letter
::first-line
::before
::after

For the sake of the question at hand, our focus will be on ::before and ::after pseudo-elements. More of it will be discussed later as we proceed.

2. HTML Entities

These are reserved characters in HTML. There are certain characters that are not present on your keyboard but can be gotten using HTML entities. For instance, you want to get the shape of a heart symbol in your application and send it to your sweetheart, just to impress her. She opens the link you sent and voila, the heart symbol displays on the screen, and beneath the heart symbols a text reels out, saying, All for the Love of Code. Romantic right?

But the question would be, “How do I get the heart symbol when my keyboard doesn’t have a heart symbol and I am not permitted to use images?” Pretty simple, use HTML entities.

To achieve the heart symbol, you use the Entity Name &hearts; that is all. Easy right? You must further understand that HTML entities are categorized as Entity Name and Entity Number.

The entity name for the heart symbol is &hearts; while the entity number is ♥ both will work fine. Entity names are easy to remember, but my advice will be to use entity number instead because they are better supported by browsers than entity names.

Now that we have all that cleared out, let’s get our hands dirty with the codes.

When using the pseudo-elements ::before and ::after, we must use the corresponding property called Content. It is a must. ::before helps place content before an element, while ::after places content after an element.

Paste this in your editor and see what you get:

<style>
button {
background: #ffccff;
padding: 10px;
border: 1px solid #1e1e1e;
}
button::before{
content: “\2014”;
}
</style>
<button class=”btn-button”> View Project</button>

Awesome. Pretty simple and straight forward. Can you see how we used ::before with the button selector? And we used the content property to assign the HTML entity.

The code simply says, place the dash symbol before the button text called View Project.

Did I hear you ask, “But, why do we have \2014 in the content property, it doesn’t look like an entity number or name. Well, that is the hexadecimal equivalent of the Html entity called —

The symbol used here is called a dash, and the entity name is — and the entity number is —

But the tricky part is, if we were just using HTML with no CSS at all, we can just achieve this in one line and assume this post is ended.

In achieving this in one line we simply do this:

<button>— View Project</button>

Lol… Eazy Peazy.

But, if we are to use CSS to achieve this, we have to first:

1. Get the entity name of the dash which is —
2. Get the corresponding entity number which is —
3. Get the Hexdecimal value of —

The hexdecimal value of — is 2014. So we simply add that in the content property with a backslash \. Hence, \2014. Without the period.

Now let’s look at — Converting Entity Number to Hexadecimal.

1. Open your calculator app on your PC. That is, the Microsoft calculator app.
2. Click on the hamburger menu on the top-right
3. Click on the programmer menu option