In my last blog, many garden friends said that they did not understand the “drawing” of CSS3 very well. After chatting with them privately for a period of time, combined with my own doubts when I began to learn CSS3 by myself, I think the reason why we did not understand it very well is mainly because we did not understand the fake elements very well. Between drawing and CSS3 some of the most sophisticated effects used in the more extensive pseudo-class elements are ::before and ::after, writing this blog is mainly to play a stepping stone role, so this blog is mainly about ::before and ::after. So let’s talk about fake elements.

2. The CSS history

The pseudo-element is actually in CSS1(CSS1 was released on December 17, 1996. This recommendation was revised on January 11, 1999), although it has evolved a lot since the browser Wars era. Originally, the syntax for pseudo-elements was “:” (a colon). As the Web has evolved, the revised pseudo-elements in CSS3 use “::” (two colons), namely ::before and ::after — to distinguish pseudo-elements from pseudo-classes (such as :hover, :active, etc.). But whether you write a colon or two colons, the browser will recognize them. Since IE8 only supports the single colon format, to be on the safe side, use the single colon if you want wider browser compatibility.

3. Pseudo-element concept

I believe that many people do not know what the pseudo-element is? What is its role in the end, let us uncover the mystery of the false element, explore the unknown story behind the false element.



A pseudo-element is simply a “fake element” or “disguised element”. In fact, it can also be understood that pseudo-elements are actually virtual elements, which do not exist (in code form) and you do not find them in the document, so pseudo-elements are virtual elements.

4. Pseudo-element effects

Despite being “fake” elements, fake elements actually behave like “real” elements, and we can add any style to them, such as changing their color, adding background colors, adjusting font sizes, adjusting the text within them, and so on. CSS pseudo-elements are primarily used to set special effects to certain selectors.

5. Pseudo-element usage

Okay, the standard blog process (a long prelude, a lot of messy introductions, which I don’t really like, but to get closer to the garden gods, it also adds to the understanding of the fake elements. So, we also went through the process. It’s done. Let’s take a look at the use of pseudo-elements

5.1 Simple Examples

“Before” and “after” are two simple examples.

<style>. CnblogsDemo1 :before {content: 'Look at the money '; }Copy the code
Please call me head brother: www.cnblogs.com/toutou ******/Copy the code
.cnblogsDemo1:after { content: '向厚看'; } </style> <div class="cnblogsDemo1"> 这里1 </div>
Copy the code

 

Effect:

The effect is: look at money here look at thick, and the “look at money “/” look at thick” is actually non-existent, and the fake element is on the page (the test is Google Chrome). There is no way to copy it directly, we just implemented the “look at money “/” look at thick” through pseudo-elements. I believe that you have a concept of fake elements in mind. In fact, in fake elements, we can not only “look at money “/” look at thick”, we can do a lot of things through fake elements.

5.2 Examples of Water Droplets

 

For example, we simply implement the effect of a water drop (such as the icon marking your current location on Baidu Map). To achieve the effect of water drop, we divided into three steps.

5.2.1 First, draw a circle

　　

<style>
span {
            height: 40px;
            width: 40px;
            display: block;
            position: relative;
        }
.cnblogsDemo2 {
            height: 26px;
            width: 26px;
            border-radius: 40px;
            -webkit-border-radius: 40px;    /* Safari and Chrome */
            -moz-border-radius: 40px;       /* Firefox */
            background: #333;
Copy the code
Please call me head brother: www.cnblogs.com/toutou ******/Copy the code
        }
</style>
<span class="cnblogsDemo2">
        
</span>
Copy the code

Effect:

5.2.2 Implementation Draw a triangle

<style>
.cnblogsDemo3 {
            height: 0px;
            width: 0px;
            border: 10px transparent solid;
            border-top-color: #333;
            border-width: 15px 10px 0px 10px;
        }
</style>
<span class="cnblogsDemo3">
Copy the code
</span>
Copy the code
Please call me head brother: www.cnblogs.com/toutou ******/Copy the code
Copy the code

Effect:

5.2.3 Water drop implementation

Many garden friends may feel that the organic combination of circle and triangle is actually the effect of a water drop. Yes, with the help of :before and :after, we want to achieve the effect of water drop is very simple, just need to effectively combine the two.

<style>
span {
            height: 40px;
            width: 40px;
            display: block;
            position: relative;
        }
.cnblogsDemo4 {
            width: 26px;
        }

            .cnblogsDemo4:before {
                content: '4';
                height: 26px;
                width: 26px;
                display: block;
                position: absolute;
                top: 2px;
                left: 0px;
                z-index: 1;
                line-height: 26px;
                background: #333;
                border-radius: 40px;
                -webkit-border-radius: 40px;
                -moz-border-radius: 40px;
                color: #fff;
                text-align: center;
            }

            .cnblogsDemo4:after {
                content: '';
                height: 0px;
                width: 0px;
                display: block;
                position: absolute;
                bottom: 2px;
                left: 3px;
                border: 10px transparent solid;
                border-top-color: #333;
                border-width: 15px 10px 0px 10px;
            }
</style>
<span class="cnblogsDemo4">
    </span>
Copy the code

Effect:

In fact, the principle of water drop effect is very simple, just add some positioning on the basis of :before and :after, and then you can organically combine the circle and triangle into water droplets. This effect is just a simple example in the world of CSS3, but I hope that through this simple example let garden friends appreciate the charm of CSS3. To know or like CSS3.

6. Summary

There are many more pseudo-elements in CSS, but I won’t list them all here. We need to explore them together. CSS in the effective combination of a variety of things, in fact, can achieve a lot of lofty effect, especially now [5+3] era, but also invincible.

If you want to know more about CSS demo, you can read my last blog. I only hope that this blog helps you learn a little bit about the web front end.

 

About the author: Focus on basic platform project development. If you have any questions or suggestions, please feel free to comment! Copyright notice: The copyright of this article belongs to the author and the blog garden, welcome to reprint, but without the consent of the author must retain this statement, and give the original text link in a prominent place on the page of the article. For the record: all comments and messages will be answered as soon as possible. You are welcome to correct your mistakes and make progress together. Or directly message me to support the blogger: if you think the article is helpful to you, you can click on the lower right corner of the article “recommended”. Your encouragement is the author to adhere to the original and continuous writing of the biggest power! \