Menu
So I read the docs and probably understand the purpose of ::before and ::after. If my understanding is correct, they should always work in combination with other elements. But the web page I'm looking at has got something like this:
<body> <div class="container-fluid"> ::before <div> ... </div> ::after </div> <body> I'm not able to understand what ::before and ::after are doing here?
300
::before (:before) In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
:before selector inserts something before the content of each selected element(s). :after selector inserts something after the content of each selected element(s). Show activity on this post. :before is exactly the same only it inserts the content before any other content in the HTML instead of after.
The only difference is that the double colon is used in CSS3, whereas the single colon is the legacy version. Reasoning: The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.
::before Represents a styleable child pseudo-element immediately before the originating element's actual content. ::after Represents a styleable child pseudo-element immediately after the originating element's actual content. By default, this new element will be an inline element.
::before and ::after refer to CSS pseudo-elements that are created before and after matching elements.
Pseudo-elements are typically not shown in HTML element trees. However, if you are using the right kind of a debugging tool (like Chrome inspector) you can see these special elements. As its nowadays very common to style a page using pseudo-selectors, it is very useful to have a debugging tool that can display them.
To verify this behaviour from your Chrome inspector (or other capable tool), try adding some content to some of those pseudo-elements with CSS, for instance:
h1:before { content: 'before'; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
