::AFTER PSEUDO ELEMENT 20 POINTS SUMMARY, CSS

By: Saurav

2017-10-24 09:05:00 UTC

1. The ::after pseudo-element can be used to insert some content after the content of a concrete element.

2. The content added using ::after is displayed inline by default, but you can add any other display property like any other css element.

3. In CSS1 and CSS2 for pseudo element, we can use :after but in css3 we use ::after, though :after will also work on most browsers (except IE8 and less)

4. The value of the content is specified using content property. You must supply the "content" property in all cases.

For example : 

HTML:

Let's <p class = "coolpara"> put a smile after the face : </p>


CSS:

.coolpara::after{
  content: ")";
}

Will generate

Let's
put a smile after the face : )

5. Screen readers won’t be able to access and read the content generated using pseudo-elements.

6. So, if you generate a content and try to select whats written, your ::after content wont be selected

After1

7. Sara Soueidan suggests to use ::after to add a small icon representing an outside link in a page improving UX for your users

An example using same methodology will be:

After2

8. As you can see, Images inserted using ::after (or any pseudo element) cannot be resized.

9. Size your image before you use it

10. ::after can be used to insert characters, strings of text, images and almost all types of content

11. The content of ::after can also be a counter, and it can also be left empty.

12. ::after can also be styled just like any other content

13. ::after content can be left empty if used for decorations

14. Don’t use ::after to insert vital content into a page that are relevant to the meaning and completeness of the content on the page.

15. We cannot attach any event handlers to it using JavaScript as its not inserted in the DOM

16. If multiple ::after are used, they will all be stacked on top of each other with only the last one visible as shown in the fiddle result below

After3

Css used is added below:

.external::after {
    content: url("http://rs1200.pbsrc.com/albums/bb334/Toby99976/Icons%20Symbols%20Warning%20Caution%20Comment%20Minichan/bullet_red.png~c200");    
}

.external::after {
    content: 'kjkaaaass' ;
}

.external::after {
    content: 'last one' ;
}

17. Ben Nadel suggests a cool feature used today a lot.

Recently I saw it being used on Car Gurus Website for specifying that sell my car is a free feature

Lets re-create it: 

HTML:

<a href="#" class="button">
 Sell My Car
</a>


CSS:

        a.button {
            background-color: transparent ;           
            color: black ;
            display: block ;
            font-size: 30px ;            
            position: relative ;
            text-decoration: none ;           
        }
        a.button:after {
            background-color: green ;
            border-radius: 3px 3px 3px 3px ;
            color: white ;
            content: "FREE" ;
            font-family: sans-serif ;
            font-size: 15px ;
            padding-left: 20px ;
            line-height: 10px ;
            margin-top: -10px ;
            padding: 3px 3px 2px 3px ;
            position: absolute ;
            text-align: center ;
            top: 50% ;
            margin-left: 5px;
        }

After5

18. For the special ASCII HTML Character Code which you can use in the content in ::after, here is a link

19. Check out Sara Soueidan blog for more cool examples. One nice geometric pattern I created was inspired by an example she used and extends the simple code she used with a ::before and few more changes in css attributes

20. I have also used ::before in this example. It prepends the content you specify before the element.

That would be a topic of another blog. Right now enjoy the pattern below and think and create your own :)

After6 

HTML:

<div class="container">
  <div class="element"></div>
</div>

CSS:


.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  width: 200px;
  height: 200px;
  background-color: blue;
  opacity: .5;
  position: relative;
  margin: 100px auto; 
  overflow: hidden;
}

.element:after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: green;
  opacity: .8;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  
}

.element:before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: pink;  
  opacity: .8;
  -webkit-transform: rotateZ(27deg);
  transform: rotateZ(27deg); 
}

Would love to know your suggestions and views :)

twitter: sprakash24oct

Owned & Maintained by Saurav Prakash

If you like what you see, you can help me cover server costs or buy me a cup of coffee though donation :)