There were not many applications of CSS pseudo-elements before. Recently, when I used a website building system to make enterprise portal websites for customers, I found that ::before and ::after often appeared in the HTML code of webpages. After checking the information, I realized that these are all elements of CSS. CSS pseudo-elements are used to set special effects to certain selectors. Therefore, this article will share with you the use of CSS pseudo-elements.
basic grammar
So-called pseudo-elements, as the name suggests they are not really HTML elements. ::before and ::after are used to add content before or after the content in the target element. Maybe you have noticed, why there is a single colon in front of before and after, and two colons for a while, is there any difference? In fact, there is no difference, but in CSS3, in order to distinguish their expressions in HTML code and CSS code, pseudo-elements in html are displayed as double colons. When writing CSS code, if you don't consider old browser compatibility issues, whether you use a single colon or a double colon, the result is the same.
It should be emphasized here that the "front" and "back" mentioned here refer to the front and back of the content in the target element, not the front and back of the target element. So, pseudo-elements are children of the target element.
Let's look at an example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
div:before{
display:table;
content:"Add content before paragraph";
}
a:after{
display:table;
content:attr(href);
}
</style>
</head>
<body>
<div>
<p>This is the paragraph text</p>
<a href="http://www.iteye.com">Hyperlink here</a>
</div>
</body>
</html>
content is an essential attribute of pseudo-elements. Used to set what to add. This content can be character text or an attribute value of the target element itself. For example, in the above example, the href attribute value is added after the content of the a tag, that is, the link address. The display effect is as follows:
Example application
Of course, the role of pseudo elements is not limited to this. In practical applications, we can add various interface display effects through pseudo elements. Here we give a common example of clearing floats. Before many of our friends cleared the floating method is to add an empty div at the bottom, using the style of clear:both;. code show as below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
div:before{
display:table;
content:"Add content before paragraph";
}
a:after{
display:table;
content:attr(href);
}
</style>
</head>
<body>
<div>
<p>This is the paragraph text</p>
<a href="http://www.iteye.com">Hyperlink here</a>
</div>
</body>
</html>
Now with pseudo-elements, we can do it even easier without adding empty elements.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
div:before{
display:table;
content:"Add content before paragraph";
}
a:after{
display:table;
content:attr(href);
}
</style>
</head>
<body>
<div>
<p>This is the paragraph text</p>
<a href="http://www.iteye.com">Hyperlink here</a>
</div>
</body>
</html>
summary:
With the :before and :after pseudo-elements, we can design more styling effects in CSS. In this article, we share and communicate the use of pseudo-elements. If you have better cases in the usual practical application process, welcome to share and communicate with you. We learn together, communicate together, and progress together.
