::BEFORE PSEUDO ELEMENT 15 POINTS SUMMARY, CSS

By: Saurav

2017-10-25 08:46:00 UTC

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

2. The content added using ::before 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 :before but in css3 we use ::before, though :before 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.

5. ::before is a styleable abstract first child of the concrete element

6. ::before content is stacked beneath other elements that come after it in the source tree.

If you want to add something before your content, use ::before. For example in the fiddle below, we have the opening quotes added using before pseudo element. (The closing tag is done through ::after pseudo tag):

Before1

HTML:

<blockquote>
    Keep Learning 
</blockquote>

CSS3:

blockquote::before {
    content: "\201C";
    /* style the quote */
    color: deepPink;
    font-size: 3em;
    position: relative;
    top: 20px;
}

blockquote::after {
    content: "\201D";
    /* style the quote */
    color: deepPink;
    font-size: 3em;
    position: relative;
    top: 20px;
}

7. As a rule of thumb, if you know you want to include an element before recurring contents, use before.

For example, lets create this Breaking Bad Inspired Breaking Bread Logo:

Before2

As you can see, most of the contents are same. The atomic number is the same, 35 for both of the blocks and it should come before the actual name.

There are better ways of doing this but just for proof of concept, we will use p tags and before pseudo elements to get the job done.

The content 35 is replicated between both the blocks and so we will use it in ::before content

HTML:

<p class = "points"> Br </p><p class = "outside">eaking</p>
<br>
<br>
<br>
<p class = "points" id = "Ba"> Br </p><p class = "outside">ead</p>


CSS:

p{display: inline;}

.outside{
  display: inline;
  font-size: 40px;  
}
.points{
  border: 2px solid white;
  background: green;
  color: white;
  width: 100px;
  height: 150px;
  font-size: 50px;  
  padding-top: 20px;    
  padding-bottom: 35px; 
  
}
.points::before{
  content: "35";
  font-size: 15px;  
}


#Ba{
  margin-left: 102px;
}

Other important points to keep in mind about ::before :

8. Images inserted using ::before (or any pseudo element) cannot be resized.

9. Size your image before you use it

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

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

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

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

14. Don’t use ::before 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

Another common scenario for ::before use case is for using tick marks before list items suggested by sarasoueidan as below:

Before3

HTML:
<ul>
    <li>Work Hard</li>
    <li>Work Harder than that</li>
    <li>Work smarter than that</li>
  </ul>

CSS:

ul {
    list-style: none;
}

li:before {
    content: url(http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/before/check-icon.png);
  
}

Finally , I will create another pattern like I created using ::before and ::after together. coz why not! :)

Before4

HTML:

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



CSS:

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

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

.element:after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: blue;
  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(20deg);
  transform: rotateZ(20deg); 
} 

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 :)