Cornelia Ekpenyong
Let's talk about CSS ::before & ::after

Let's talk about CSS ::before & ::after

Cornelia Ekpenyong's photo
Cornelia Ekpenyong
·

4 min read

Hello World!

This is officially my first story on my Hashnode powered blog, I am nervous and excited at the same time but since you are currently reading this, I guess I did it!. Now let's jump right in.

What exactly are ::before & ::after?

::before & ::after must have popped into one of your google searches and you ended up leaving your original search to hunt it down right? no? just me?... oh well. CSS ::before and ::after are part of what we know as CSS Pseudo-Elements, they are a group of extremly powerful tools which had helped web developers immersely. Pseudo-elements are like virtual elements that we can treat as regular HTML elements. The weird thing about them is that they do not exist in the document tree or DOM. This means that we don't actually type the pseudo-elements, but rather create them with CSS. A few common pseudo-elements are:

  • ::before (:before)
  • ::after (:after)
  • ::first-letter
  • ::first-line
  • ::cue

:before or ::before?

Well tecnically the answer is ::before. But why?. you see they are actually both accepted but the double-colon was attributed to it because of what we call pseudo-class. Pseudo-classses are phantom states or specific characteristics of an element that can be targeted with CSS. A few pseudo-classes are:

  • :nth-child
  • :visited
  • :hover

As you can see they are all characterized by the use of a single-colon. In other not to cause confusion Pseudo-elements were changed to double-colon usage.

take note: Internet Explorer 8 and below only support :before because why not.

::before & ::after syntax:

As the name implies the ::before pseudo-element create contents before an element. Now to be specific you don't actually add a content "before" the div element but inside the div but before the element in the div(read that again but slowly), same goes for ::after where you add content after the element but in the div.

Now to be specific you don't actually add a content "before" the div element but inside the div but before the element in the div

The CSS syntax:

div::before{
  content: "";
  //css codes
 }

div::after{
  content: "";
  //css codes
 }

Content

The content property in CSS defines the content of an element. The accepted values include:

  • normal: This is the default value. Equals to none.
  • none: A pseudo-element will not be generated.
  • <string>: A string can be inputed before or after the element.
div::before{
  content: "she said:";
  color: red;
 }
  • <image>: set the content to an image using url() or linear-gradient()
    div::after{
content: url(images/books.jpeg)/ "alt text here";
}
  • attr(*attribute*): sets the content as the string value of the selected element selected attribute.
    div::before{
content: "(" attr(href) ")";
padding: 2rem;
color: #a9a9a9;
font: small san-serif;
}

In conclusion pseudo-elements are pretty powerful and should really be subjects of various experiments even in making CSS illustrations, instead of creating multiple divs a single div could be used in multiple ways.

CSSWeb Development