-1

I see patterns like this from time to time: 

::before {
  content: '';
}
::after {
  content: '';
}
li::first-child {
  content: '';
}

I don't understand what it really does. I understand that the 'content' property replaces an element, but what generally would we replace? Is there a "problem" that exists that we use this as a solution?

To be clear, I understand what psuedo-selectors are. My question is specifically about why we use content: ''. If ::before is creating content BEFORE an element is painted to the DOM, then why are we creating an empty string of content? What value does that add?

Tycholiz
  • 1,102
  • 4
  • 17
  • 33

2 Answers2

1

As far as I understand nature of your question there's 2 main things we have to point out:

how to think about ::before and ::after pseudo-elements

These pseudo-elements are not getting put before or after element they refer to. Nor in time manner (so it's not getting rendered before or later) nor in spacial manner (not in-front/behind or before/after). ::before and ::after pseudo-elements are children of element they refer to. ::before is a first child, inserted before all other, and ::after is the last child, inserted after all other children. It's a very important concept about pseudo-elements we need to remember.

what is content?

I'll lean on W3C documentation with that.

User Agents are expected to support this property on all media, including non-visual ones.

The content property dictates what is rendered inside an element or pseudo-element.

For elements, it has only one purpose: specifying that the element renders as normal, or replacing the element with an image (and possibly some associated "alt text").

For pseudo-elements and margin boxes, it is more powerful. It controls whether the element renders at all, can replace the element with an image, or replace it with arbitrary inline content (text and images).

Your way of thinking, that it's because of some problem we had to solve, may be close to the real answer. That's probably connected to what user agents/browsers needed to render any element and that's why it's obligatory to add content: '' to pseudo-elements to render it at all. With other elements with no visible content like <div></div> it's done automatically so we could use it to our own purpose, even with no visible content but with styles applied to it.

Community
  • 1
  • 1
olejniczag
  • 384
  • 1
  • 10
-1

These are called pseudo-elements , you would usually use them when creating some content: in front of or after the element. How it works is they create a tag in your html structure that you can then style in your style-sheet with ::before and ::after selectors. Also content property doesn't replace anything it's a value that your pseudo-element holds. You can read more about them here: https://css-tricks.com/almanac/selectors/a/after-and-before/

Tycholiz
  • 1,102
  • 4
  • 17
  • 33
Excell
  • 86
  • 9
  • makes sense, but I'm more interested in understanding why it is content: ""? – Tycholiz Aug 17 '19 at 17:25
  • It's a value just like in every html element say: `
    value
    `     – Excell Aug 17 '19 at 17:30
  • Right, but the value here is an empty string. Normally, I don't write make an empty

    tag in my html, even though it wouldn't break anything. So why is it content: ''?

     – Tycholiz Aug 17 '19 at 17:32
  • But you do also use wrappers/containers like say `
    ...
    ` that are used to simply wrap some elements and give them styles, notice that you don't use any values inside div tags. You can use those elements to do custom shapes before tags and more, there are countless example why you'd do `content:''`.     – Excell Aug 17 '19 at 17:45