Using the ::before and ::after pseudo elements,
Let's create a common pattern.

Hello.
My name is Maruyama, a coder at Coding Factory.

In this section, we would like to mainly introduce the work style of Coding Factory and in-depth coding techniques. We are also planning roundtable discussions where coders will talk about their coding theories, so please look forward to it!

This time, I would like to introduce the features and coding examples of the CSS " ::before,::after pseudo-element ," which changed my (coding) worldview ever since I learned about it!

What are the ::before and ::after pseudo elements?

According to the W3C, pseudo elements "provide abstractions or information beyond those contained in the document language (HTML)." The ::before and ::after pseudo elements indicate generated content before and after the specified element.

Simply put, the ::before and ::after pseudo elements allow you to insert text or icons before or after a specified element (such as a div tag).

Differences from pseudo-classes

Pseudo classes are selectors that allow you to apply styles to elements that fulfill a particular event or state.

For example, the first child element of a li element (li:first-child) or when you hover the mouse over a link (a:hover).

There are some web pages that explain pseudo-classes and pseudo-elements as being the same thing, but it is generally better to think of pseudo-classes and pseudo-elements as different things.

Also, there is one interesting thing about pseudo-classes.

The :first-child and :last-child pseudo-classes are similar, but while the :first-child pseudo-class is supported in CSS2, the :last-child pseudo-class is newly supported in CSS3.

Therefore, the :last-child pseudo-class can only be used in IE9 or later, which can apply CSS3.

The question of whether pseudo-elements should have one colon (single colon) or two (double colon)

Up until CSS2 , pseudo-classes and pseudo-elements were written with a single colon, but from CSS3 onwards, this has been changed to double colons.

However, because IE8 does not support CSS3, double colon notation is not possible.

Therefore, for now , double colons (E::before, E::after) should only be used when implementing smartphone sites or PC/RWD sites that target browsers IE9 and above, and single colons (E:before, E:after) should be used when also targeting IE8 and below .

Coding example using ::before and ::after pseudo elements

Example 1: A button-like list with text and link icons

When coding an element that looks like Example 1,

The HTML looks like this:

<ul class="list-links">
  <li><a>Text text text text text text</a></li>
  <li><a>Text text text text text text text text text text text text text</a></li>
  (···omission)
</ul>

This time, we specify the style of a square icon for the ::before of the li element.
We will specify a right-pointing arrow icon for the ::after of the a element.

Basically, if you specify the front side of the element (left or top) for ::before and the back side of the element (right or bottom) for ::after, there will be less misunderstandings when multiple people are coding .

The CSS is written as follows:

.list-links {
  width: 100%;
}

.list-links > li {
  position: relative;
  border-bottom: 1px solid #ddd;
}
.list-links > li:first-child { border-top: 1px solid #ddd;}

.list-links > li::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 10px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: url("/common/images/ico_arrow_black_01.png") top left no-repeat;
  background-size: 10px 10px;
}
.list-links > li a {
  display: block;
  position: relative;
  padding: 15px 30px 15px 30px; /* Specify margins on the left and right to take into account the icons */
  font-weight: bold;
}

.list-links > li a::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 10px;
  width: 12px;
  height: 24px;
  margin-top: -12px;
  background: url("/common/images/ico_arow_links_blue_01.png") top left no-repeat;
  background-size: 12px 24px;
}

The key points for implementing icons using CSS in this case are:
Set its position to top: 50%; and give it a negative margin that is half the size of the image .
The reason for adding a negative margin is that with top: 50%;, the top of the image will be half the height of the element, and the apparent position will be one icon size lower than half.

Therefore, a negative margin half the height of the icon size is added to push it upwards and center it vertically.

Example 2: Speech bubble

Let's code example ② using ::after in the same way as example ①.
Place the triangle image of the speech bubble after the div element that makes up the speech bubble.

The HTML is written as follows:

<div class="box-balloon">
  <p>Hello! This is a sample. Hello! This is a sample. Hello! This is a sample. Hello! This is a sample. Hello! This is a sample. (Omitted)</p>
</div>

The CSS is written as follows:

.box-balloon {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 15px;
  border: 6px solid #279ee9;
  border-radius: 6px;
  margin-bottom: 42px; /* Height of triangle image + amount of space you want to leave at the bottom */
}
.box-balloon::after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -32px;
  width: 34px;
  height: 32px;
  margin-left: -17px; /* half the width of the triangle image */
  background: url("/common/images/ico_baloon_tip_01.png") top left no-repeat;
  background-size: 34px 32px;
}
.box-balloon > p {
  font-weight: bold;
  line-height: 2.0;
}

In example ②, the position is specified as left: 50%; instead of top, and a negative margin of half the width of the speech bubble triangular image is added, shifting it to the left and centering it horizontally.

• Here is a sample of Example 1
• Click here for a sample of Example 2