I will explain the above items
By reading this article, you will understand how to use before and after, and you will be able to specify images and icons as pseudo-elements, so be sure to check it out!
Table of contents
- What are CSS pseudo-elements? Explain the characteristics of before and after
- Using before and after
- How to add icons with CSS before and after
- How to add images with CSS before and after
- 3 common reasons why before and after don’t work
- no content property specified
- Incorrect use of the position property
- It is specified for an element where before and after do not work
- summary
What are CSS pseudo-elements? Explain the characteristics of before and after
A CSS pseudo-element is a way of adding style to a given HTML element.
Among pseudo-elements, before and after have the role of adding pseudo-elements to the specified HTML element.
Before adds the pseudo-element before the specified element, after adds it after.
The input method of before and after is as follows.
As mentioned above, there is a feature that “::” is added before the input name.
The content property entered in the selector has the role of displaying the characters, images, icons, etc. entered in the value as pseudo elements.
Using the before and after pseudo-elements allows you to add a new element before or after the specified element, so they are often used when adding an icon next to the title or a subtitle.
Using before and after
Describes how to add pseudo-elements using before and after.
This time, I will explain how to add an icon next to the text and how to add a subtitle using sample code.
How to add icons with CSS before and after
When adding icons before and after, there are two methods: using icons that can be expressed with characters, and specifying icons with FontAwesome .
We will explain how to specify the icon by each method using sample code.
sample code
HTML
CSS
.test::before{
content: "\f2b9"; /*Font Awesomeのユニコード*/
font-family: "Font Awesome 5 Free"; /*Font Awesomeの指定*/
color:rgb(233, 101, 84); /*色*/
}
.test::after{
content: "▲";
color:blue;
}In the above code, font-awesome is used to display the icon before, and a double-byte character “▲” is entered after.
How to use FontAwesome is explained in detail in the article below.
You can change the color of the element specified by content using the color property.
Execution result
How to add images with CSS before and after
Images can be added to pseudo-elements and before and after by leaving the content property blank and displaying the image using the background-image property .
It is possible to specify an image for the content property and display it, but in that case it is difficult to adjust the size of the image with CSS.
If you specify it as a background image with the background-image property, you can specify the size with CSS, so you can easily specify it.
sample code
HTML
<body>
</body>CSS
.test::before {
content: "";
background-image: url(../pic/test.png);
display: inline-block;
width: 30px;
height: 30px;
background-size: contain;
background-position: center;
vertical-align: middle;
}The image specified by background-image is displayed next to the text as an inline block element with “display: inline-block;”.
In the sample code, before is specified, but by changing it to after, it is also possible to specify an image behind the element.
Execution result
3 common reasons why before and after don’t work
There are three common reasons why CSS before and after don’t work.
- no content property specified
- Incorrect use of the position property
- It is specified for an element where before and after do not work
I will explain each reason.
no content property specified
When specifying before and after pseudo-elements, be sure to specify the content property regardless of whether you use it or not .
For example, when specifying an image with the background-image property, the content property should be empty, but since it plays the role of displaying the element, the image will not be displayed if it is not specified.
Incorrect use of the position property
Pseudo-elements specified by before and after are usually positioned using the position property.
If before and after do not work, the method of specifying the position property may be wrong and the pseudo-element may not be displayed or may be specified outside the display screen.
How to use the position property is explained in detail in the following article.
It is specified for an element where before and after do not work
HTML elements that cannot use before and after are as follows.
- inputs
- text area
- img
Note that specifying before and after for the above elements does not work.
Also, if you want to add a pseudo-element to an element that cannot be specified, you can do so by enclosing the element in a div tag and specifying it, so please give it a try!
summary
This time, I explained how to use the CSS pseudo-elements before and after. How was it?
By using before and after, you can specify pseudo elements before and after the specified element.
The points when specifying pseudo-elements in before and after are as follows.
- When specifying characters: just enter the characters you want to specify in the content property
- When specifying an icon: Specify a FontAwesome unicode or an icon that can be entered in double-byte characters in the content property
- When specifying an image: Specify an empty content property and specify an image with the background-image property
