CODEWITHSUNDEEP
htmlcsspseudo-element
Amit singh
Amit singh

Reputation: 2036

What does *:before and *:after do in css

I researched on SO about *(Asterisk) and I have found that it selects all elements and applies styles to them.

I followed this link, Use of Asterisk and I noticed that this code will apply border to all of the elements.

* {
 border: 1px solid red;
}

Now, my concern is that what does *:before and *:after do in CSS?

*:before,
*:after {
          box-sizing: border-box;
}

Upvotes: 19

Views: 32477

Answers (5)

Lerner Zhang
Lerner Zhang

Reputation: 7130

The pseudo-element selectors :before and :after (or ::before and ::after) are used to generate content on the fly for browsers, and the results are called generated content. The generated content does not belong to the document's DOM, and thus is invisible to devices like screen readers.

It's like a template, for instance we can use that to add icons before list items, to display URLs next to links when web documents get printed out, to add language-appropriate quotation marks around a quote.

Here is a fiddle which would be worth thousands of words:

ol.warning::before {
  background-image: url('https://i.postimg.cc/bYW5CQF7/6897039.png');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
}

ol.warning::after {
  content: "   (This is very important!)";
  color: red;
}
<ol class="warning">Having No Regular Checkups</ol>
If you make regular checkins at the gluten free aisle, but not with your doctor, that needs to change.  Checking your health with a weigh in, stress test, and blood workup is critical.

<ol class="warning">Leading A Sedentary Lifestyle</ol>
If you spend most of the day sitting and don’t have an exercise plan or routine, time to take action.  Get a plan for daily movement and make sure weights are part of the equation.

<ol class="warning">Eating Too Much </ol>
If you sure your microwave plastics are BPA free, but fill them with too many calories of processed food, time to count calories.  While you are at it, make sure your food comes from good sources and drink more water.

<ol class="warning">Staying Sleep Deprived</ol>
If you are tired, that is not a badge of honor.  That is a health hazard sign of the highest importance. Get 8 hours a night, don’t hit the snooze button, and get away from your phone an hour or more before bedtime.

<ol class="warning">Texting And Driving</ol>
No LMAO text or snapchat streak is worth your health or the health of someone else.  Learn to view this as important as fastening your seatbelt.

<!-- content from https://www.trainingforwarriors.com/the-20-most-dangerous-things-you-are-still-doing/  -->

You don't need to add the template content for all points one by one, and you can modify them at once when necessary.

References:

  1. Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics
  2. Learning To Use The :after And :before Pseudo-Elements In CSS

Upvotes: 0

Sir McPotato
Sir McPotato

Reputation: 959

Like their name said it, :before & :after are used to apply css properties JUST before/after the content WITHIN the matching element.

One day, a wise man said 'One fiddle is worth thousands words', so :

div {
  border: solid 1px black;
  padding: 5px;
  }

div:before {
  content: "Added BEFORE anything within the div!";
  color:red;
 }

div:after {
  content: "Added AFTER anything within the div!";
  color:green;
 }
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>

Upvotes: 35

Ruslan
Ruslan

Reputation: 10147

:after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div:after {
  content: "hi";
}

<div>
  <!-- Rest of stuff inside the div -->
  hi
</div>

:before is exactly the same only it inserts the content before any other content in the HTML instead of after. The only reasons to use one over the other are:

  • You want the generated content to come before the element content, positionally.
  • The :after content is also "after" in source-order, so it will position on top of ::before if stacked on top of each other naturally.

The value for content can be:

  • A string: content: "a string"; - special characters need to be specially encoded as a unicode entity. See the glyphs page.
  • An image: content: url(/path/to/image.jpg); - The image is inserted at it's exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.
  • Nothing: content: ""; - Useful for clearfix and inserting images as background-images (set width and height, and can even resize with background-size).
  • A counter: content: counter(li); - Really useful for styling lists until :marker comes along.

Note that you cannot insert HTML (at least, that will be rendered as HTML). content: <h1>nope</h1>;

Upvotes: 2

Nalani
Nalani

Reputation: 397

:before selector inserts something before the content of each selected element(s). :after selector inserts something after the content of each selected element(s).

so *:before like Dan White said would be before all elements and *:after will be after all elements

Upvotes: 5

Blago Eres
Blago Eres

Reputation: 1348

You are saying that all pseudo elements will have the same box model behavior as normal elements that are present in your DOM. ::before and ::after are pseudo elements, which means they are not in the DOM and you can't select them with mouse.

Upvotes: 0

Related Questions