How does ::after and ::before work on properties other than content?

Question

I've always had a problem understanding the use of ::before and ::after on properties other than content. See for the code example below, there is this batch of code -

.loader,
.loader:before,
.loader:after
{
  border-radius: 50%;
} 

What does this mean in English? border-radius before and after what? I thought commenting out the sections in the CSS will help me understand it by trial and error but it just got me more confused.
Can someone translate ONLY the :before and :after part in the below CSS in layman terms?

.loader,
.loader:before,
.loader:after 
{
  border-radius: 50%;
}
.loader:before,
.loader:after 
{
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #0dcecb;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
}
.loader 
{
  font-size: 11px;
  text-indent: -99999em;
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em #FFF;
  -webkit-transform: translateZ(0);
}
.loader:after 
{
  width: 5.2em;
  height: 10.2em;
  background: #0dcecb;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

body
{
   background: #0dcecb;
}

<div class="loader">Loading...</div>

Answer 1

The content property is declared in the second ruleset:

.loader,
.loader:before,
.loader:after 
{
  border-radius: 50%;
}
.loader:before,
.loader:after 
{
  position: absolute;
  content: '';
}
...

The reason border-radius is being specified separately here is because the author wants to apply it not only to the pseudo-elements, but also to the .loader element itself, as you can see from the selector.

All of the ::before and ::after rules matching the same .loader element cascade to create one of each pseudo-element for said .loader element. Since there is indeed a content property specified, the pseudo-elements will be rendered, and all of the other properties applying to the pseudo-elements will take effect where applicable:

Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.

In short, what you have is no different from your basic generated content CSS rule; the author has simply chosen to split some of the declarations into other rulesets for the purposes of selectors.

For what it's worth, here's what the CSS for each pseudo-element would look like had the author not chosen to split the border-radius, position and content declarations (and duplicated them once per pseudo-element instead):

.loader:before
{
  border-radius: 50%;

  position: absolute;
  content: '';

  width: 5.2em;
  height: 10.2em;
  background: #0dcecb;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
}

.loader:after 
{
  border-radius: 50%;

  position: absolute;
  content: '';

  width: 5.2em;
  height: 10.2em;
  background: #0dcecb;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
}

Answer 2

:before and :after is used to added something before of after the content. Specially if we want an icon of Mobile before "Call" we can use do it in 2 ways :

1 <div><span class="ico"></span><span>Call</span></div> Now to .ico{ // we write css for background giving link of icon and its background size width height properties. }

2. Other way is by :before. <div><span>Call</span></div>

div span:before{ // this will have content:"" , than all background properties with position absolute and left top value.} Thus with the help of before we don't have to write extra html tag. Same goes with :after tag

As your CSS is adding border to main text before an after , it will look messed up. before and after needs proper content: "", it can be either blank or any value that we would like to appear before main text. like arrow , dot etc.

Hope this explanation helped.

Answer 3

.element::before, and .element::after are Pseudo-elements that can represent an actual element if wanted, or insert content (or both).

You can imagine it working as follows:

<div>
<element BEFORE></element>
.. div content ..
<element AFTER></element>
</div>

Your example is a bad way to have to learn about these elements because it's pretty advanced usage.

Where border-radius is applied to these elements, it's just like you've applied to to any other element. If it has a width, size and some appearance (like a background colour), you'll see the border-radius applied to it.

Answer 4

:before and :after is pseudo elements that is not in DOM (that means you can't click on them), but you can use them via css. content is required and usually set just to empty string. These elements can be used as normal div that extends bound of element. See example below

.my-div {
  height: 20px;
  width: 300px;
  border: 5px solid #454545;
  margin: 0 auto;
  position: relative;
  /* used to position :before and :after elements as they are absolute positioned */
}
.my-div:before {
  content: '<';
  background-color: red;
  position: absolute;
  left: -20px;
  top: 0;
  display: block;
  width: 20px;
  height: 100%;
  color: white;
  font-weight: bold;
  text-align: center;
}
.my-div:after {
  content: '>';
  background-color: green;
  position: absolute;
  right: -20px;
  top: 0;
  display: block;
  width: 20px;
  height: 100%;
  color: white;
  font-weight: bold;
  text-align: center;
}

<div class='my-div'>CONTENT</div>