[CSS] How to use pseudo-elements after and before?

I will explain according to the above items.

If you read this article, you will be able to use CSS before and after .

Please read to the end!

What are pseudo-elements before and after?

Before and after used in CSS are called pseudo-elements.

In HTML, you can create an element by enclosing it in tags. By using pseudo-elements, you can create pseudo-like elements in HTML .

I will talk about the advantages and disadvantages later, but it is used when you want to create decorative elements that are not worth writing in HTML.

Before and after are described as follows.

h1:before {
  content: "☆";
  color: skyblue;   /*
}

Enter what you want to insert, such as text, images, or sounds, in content.

before adds the pseudo-element just before the content inside the element.

In the above, “How to use ☆ pseudo-elements” is displayed. If after, it will be added immediately after the content.

If no z-index is specified, before and after will be positioned above the content within the element.

Between before and after, after overlaps on top.

Advantages and disadvantages of using pseudo-elements

The idea was that pseudo-elements could create things like elements in HTML.

What are the advantages and disadvantages of using it?

Advantages of pseudo-elements

The advantage of using pseudo-elements is that you can insert various things without using HTML .

If you write a lot of things for decoration purposes in HTML, it will get messy.

The point is that it can be written in a way that does not affect the HTML source code.

Since search engines regard HTML descriptions as the contents of content, there is also the advantage of not affecting SEO by decorating with CSS.

Disadvantages of pseudo-elements

The fact that it doesn’t affect the HTML source and search engines can be both an advantage and a disadvantage.

Search engines won’t recognize important keywords in the text you insert with pseudo-elements.

It is best to use it for decorative purposes only .

Also, when you want to move elements with JavaScript, it is often more convenient to create elements with HTML.

Depending on the situation, use pseudo-elements.

Sample before and after pseudo-elements

Would you like to know how to use it and the pros and cons?

Here, I will introduce two examples that actually use before and after.

Place a NEW icon

We will introduce how to specify the position of the pseudo-element and set the NEW icon .

You can use it for new articles, news, images, etc.

.new {
  position: relative;
  width: 250px;
  height: 150px; 
  background: #fff;
  border: 1px solid #333;
}
.new p {
  margin: 0;
  line-height: 150px;
  text-align: center;
  font-size: 16px;
  color: #333;
}
.new:after {
  content: "NEW";
  padding:5px 10px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #ff6347;
  position: absolute;
  top: 0;
  left: 0;
}

I was able to display a pseudo-element with the text “NEW” in the upper left of the content.

position is used to specify the position.

position: absolute;
top: 0;
left: 0;

The position is aligned with the upper left part.

A border surrounds the entire element.

Other than that, I’ve specified the size and position of the text within the element to make it easier to see.

make a speech bubble

Create the tail part of the callout using pseudo-elements .

<div class="message">

.message {
  position: relative;
  background: #eee;
  width: 250px;
  padding: 20px;
  border-radius: 7px;
}
.message:before {
  content: '';
  border: 15px solid transparent;
  border-left: 15px solid #eee;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

You can see the tail of the speech bubble outside the element with the text.

This tail part uses part of the frame.

You can make a triangle by displaying only one side of the border and making the rest transparent.

This is a method that can also be used when creating arrow icons, so let’s remember this.

Since “top: 50%” specifies the position of the top of the triangle, it is adjusted with the last “transform: translateY(-50%)”.

Summary: Let’s express various expressions with pseudo-elements

This time, I explained how to use pseudo-elements after and before.

We also introduced the advantages and disadvantages.

In addition to the sample code, it is a convenient specification that is useful in various situations, so let’s use it more and more.

I hope that this article will be of help to you.