What you don’t know about CSS ::before and ::after pseudo-elements_html/css_WEB-ITnose

This article is equivalently inspired by an insight into programming life.

CSS has two pseudo-classes that are not commonly used: before and :after. They are occasionally used by people to add custom formats, but their functions are not limited to that. A few days ago, I discovered Creative Link Effects, a very interesting page that introduces creative link effects. The amazing effects in it use a lot of features. In addition to the transform attribute for deformation, these two pseudo-elements will be introduced next.

Creative Button Styles

Basic Grammar

Before understanding advanced applications, let’s first understand the grammar rules . When you usually only need to use these two pseudo-elements to add some custom characters, you only need to use the single colon writing method used by the pseudo-class to ensure browser compatibility:

Html Code

1. p:before {}

However, in CSS3, in order to distinguish pseudo elements and pseudo classes, they are pseudo The element uses double colons, so if attributes such as display or width are used to separate the display from the original element, it is recommended to double-write according to the standard. Browsers that are too old may have support issues, but most pseudo elements are used with CSS3, so there is no need to be backward compatible:

Html code

1. img::after {}

The unique attribute content under these two pseudo-classes is used to add logical headers to elements in CSS rendering. Add content at the beginning or end. Note that these additions will not change the document content, will not appear in the DOM, cannot be copied, and will only be added in the CSS rendering layer. The following values ​​are useful:

[String] - Enclosing a string in quotes will add the string to the element content. Example:

Html code

1. a:after { content: "?"; }

attr() ? Calling the attributes of the current element can conveniently display the Alt prompt text of the image or the Href address of the link. Example:

Html code

1. a:after { content:"(" attr(href) ")"; }

url() / uri() ? Used to reference media files. Example:

Html code

1. h1::before { content: url(logo.png); }

counter() ? By calling the counter, you can implement the serial number function without using list elements. For details, please see the usage of counter-increment and counter-reset attributes. Example:

Html code

1. h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

Second Advanced Tips

Clearing floats is a problem that is often encountered. The solution for many people is to add an empty The div applies clear:both; attribute. Now, instead of adding meaningless elements, you only need the following style to automatically clear floats at the end of the element:

Html code

1. .clear -fix { *overflow: hidden; *zoom: 1; }
2. .clear-fix:after { display: table; content: ""; width: 0; clear: both; }

Many people like to add huge quotation marks as the background to the blockquote quotation paragraph. In this case, we can use :before to replace the background, which can leave space for the background and also You can use text directly instead of pictures:

Html code

1. blockquote::before {
2. content: open-quote;
3. position: absolute;
4. z-index: -1;
5. color: #DDD;
6. font-size: 120px;
7. font-family: serif;
8. font-weight: bolder;
9. }

Three special effects

In addition to simply adding characters, with the powerful positioning and special effects features of CSS, you can completely add additional effects to simple elements Attach the effect of up to two containers. One thing to note is that if the content is not required to only cooperate with the style attribute to create an effect, the content attribute cannot be empty, that is, content:"" . Otherwise, other style attributes will not take effect.

Hovering square brackets appear

Move the mouse over the link, and square brackets appear:

Html code

1. a {
2. position: relative;
3. display: inline-block;
4. outline: none;
5. text-decoration : none;
6. color: #000;
7. font-size: 32px;
8. padding: 5px 10px;
9. a:hover::before, a:hover::after { position: absolute; }
10. a:hover::before { content: "5B"; left: -20px; }
11. a:hover::after { content: "5D"; right: -20px; }

Similarly, we only need to match the display : block and position: absolute, you can treat them as two containers and combine them into a special effect of floating double borders:

Html code

a {

position: relative;

1. display: inline-block;
2. outline: none;
3. text-decoration: none;
4. color: #000;
5. font-size: 32px;
6. padding: 0 10px;
7. }
9. /* Large frame */
10. a:hover::before, a:hover::after {
11. content: "";
12. display: block;
13. position: absolute;
14. top: -15%%;
15. left: -14%%;
16. width: 120%;
17. height: 120%;
18. border-style: solid;
19. border-width: 4px;
20. border-color: #DDD; 🎜>
/* small box */
a:hover::after {
top: 0%;
left: 0 %;
width: 100%;
height: 100%;
border-width: 2px; 🎜>
28. This article is equivalently inspired by an insight into programming life. Using the :before and :after pseudo-classes to combine more powerful features of CSS3, you can also complete many interesting special effects and Hacks. This is just a starting point. What magical uses can you come up with?