Lesson 5: CSS Pseudo Elements

The definition of pseudo is something that is not genuine or a sham. In Web development that pretty much sums up what pseudo elements are. There is no HTML markup for such an element, it is essentially not existent. Why is there a need for such a thing in web development? Here are some reasons:

• To create graphical features like ribbons or arrows without using multiple HTML elements that would make your code less semantic.
• To draw a users attention to an area of interest.
• To add dimension to elements.
• To add interest

Pseudo elements should never be used to display important information as they are not always readable by screen readers. In essence they should only be used to improve the visual user experience.

The Basic Pseudo Element:

HTML (notice there is no new element in the HTML code)

<div class="pseudo-me">My Text</div>

CSS

.pseudo-me::before {
    content: '->'
}

Take note that the double colon signifies a pseudo element, whereas a single colon signifies a pseudo class in the selector. We will cover pseudo classes next. Since this distinction was not a standard when the spec was created, most browsers will still allow pseudo elements to be rendered if a single colon is used. Pseudo elements also require a style of content to be present for the browser to render it.

Types of Pseudo Elements:

In the example above we used a ::before pseudo class, while not always followed strictly, each pseudo element type should be used in the most semantic way. Here is a list with definitions for each type:

• ::after — Creates an element that is the last child of the selector
• ::before — Creates an element that is the first child of the selector
• ::cue — Used to style media elements like captions and cues
• ::first-letter — Used to style the first letter of the selector’s content
• ::first-line — Used to style the first line of the selector’s content
• ::selection — Used to style user selected text

The most commonly used pseudo selectors are ::after and ::before , I have never needed to use the others defined.

Real-Life Examples:

Icon

Today most icons should be implemented with an SVG, but in the past they were most commonly implemented using an icon font. A font file would be required to map unicode characters to the glyph you were required to use. This is how you might see this in code:

HTML

<div class="icon">Icon Text</div>

CSS

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.icon::before {
  font-family: 'Material Icons';
  content: '\E90D'
}

Arrow

In this example we use an ::after pseudo element to create a triangle and position it next to an element to make it look like an arrow.

HTML

<div class="arrow">Next</div>

CSS

.arrow {
  background: black;
  color: white;
  display: inline-block;
  padding: 1em;
  font-family: sans-serif;
  margin: .5em;
  position: relative;
}
.arrow::after {
  content: '';
  border-right: 1.5em solid black;
  border-top: 1.5em solid black;
  border-bottom: 1.5em solid transparent;
  border-left: 1.5em solid transparent;
  position: absolute;
  transform: rotate(45deg);
  top: 0;
  right: -1.5em
}

Ribbon

Banner ribbons were very popular in designs a few years ago, and they were challenging to do without adding HTML code that was not semantic. Here is the code I have come up with (note: I still had to add a child element to get the right look):

HTML

<div class="ribbon">
  <div class="ribbon__text">Huge Sale</div>
</div>

CSS

.ribbon {
  background: #777;
  display: inline-block;
  margin: 0 3em;
  position: relative;
}
.ribbon__text {
  color: white;
  padding: 1em;
  font-family: sans-serif;
}
.ribbon::before {
  content: '';
  border-right: .5em solid transparent;
  border-top: .5em solid #2D2D2D;
  border-bottom: .5em solid transparent;
  border-left: .5em solid #2D2D2D;
  position: absolute;
  left: 0em;
  z-index: -1;
  bottom: -.9em;
  transform: rotate(90deg)
  
}
.ribbon::after {
  content: '';
  border-right: .5em solid transparent;
  border-top: .5em solid transparent;
  border-bottom: .5em solid #2D2D2D;
  border-left: .5em solid #2D2D2D;
  position: absolute;
  right: 0em;
  z-index: -1;
  bottom: -.9em;
  transform: rotate(90deg)
  
}
.ribbon__text::before {
  content: '';
  border-right: 1.5em solid black;
  border-top: 1.5em solid black;
  border-bottom: 1.5em solid black;
  border-left: 1.5em solid transparent;
  position: absolute;
  top: 1em;
  left: -2em;
  z-index: -2;
}
.ribbon__text::after {
  content: '';
  border-right: 1.5em solid transparent;
  border-top: 1.5em solid black;
  border-bottom: 1.5em solid black;
  border-left: 1.5em solid black;
  position: absolute;
  top: 1em;
  right: -2em;
  z-index: -2;
}

Conclusion

There are many uses for pseudo elements in visual style. The more you learn to think out of the box and learn different ways to use them, the more powerful you will be as a web developer. Next we’ll learn about pseudo classes and what the difference is between them and pseudo elements.