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?
::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';
}
I assume you are seeing that, because chrome inspector shows it for inspection: http://www.youtube.com/watch?v=AcKlJbmuxKo
They are actually not in the original html served from the server but, added by Chrome Inspector there only.
You can use those to view their box model on screen and the styles declared for them.
Also check this: https://stackoverflow.com/a/19978698/774086
::before and ::after are pseudo elements as you can see on this example:
CSS:
.container-fluid>p::before{
content: "HI";
}
.container-fluid>p::after{
content: "Bee";
}
http://jsfiddle.net/vX2jW/
You can read more here: http://css-tricks.com/almanac/selectors/a/after-and-before/
Related
I was experimenting with Eric Bidelman's <fancy-tabs> shadow dom example: https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
And was trying to add Material Design styling to it, which would require adding an :after pseudo element to the tabs.
After some experimentation I found that the internal styles for applying pseudo elements do appear to work when using Polymer, but not when using vanilla JS...
Polymer example:
https://jsbin.com/maqaze/edit?html,output
Vanilla JS example:
In this second example, applying the :after pseudo element does not work within the shadow dom <style> it apparently needs to be set externally.
https://jsbin.com/toxalu/edit?html,output
So my question is, how should you go about adding a pseudo element to a slotted / light dom element, without needing to use external styles?
(have tried these examples on Chrome and Safari)
If it seems to work in Polymer it's due to the fact that Polymer 1.0 doesn't really use native ::slotted pseudo-elements.
In fact Polymer uses native Shadow DOM "v0" and converts ::slotted to ::content. You can see it in the Dev Tools.
As you have noted you can add ::after pseudo-elements from the outside.
I suppose pseudo-elements are considered as complex selectors and therefore are not supported within ::slotted().
This question already has an answer here:
What is it in a pseudo-element that makes the pseudo-element pseudo?
(1 answer)
Closed 6 years ago.
When I read about CSS and HTML I cross the word pseudo-elements.
I haven't found a good short explanation for what pseudo means. Could someone please explain this to me?
psuedo-elements allow you to style specific parts of an element. Some examples of pseudo-elements are:
::after
::before
These specific ones allow you to add style to just after, or just before an element.
for example:
.test {
background-color: gray;
}
.test::after {
content: ' some more text';
color: red
}
<div class='test'>
testing...
</div>
Here, we style the .test element normally
BUT, then we add a bit more after it using the pseudo-element selector ::after to let us add more text and change the colour.
You can read more and see more examples at https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements
Supposed or purporting to be but not really so; false; not genuine:
— https://en.oxforddictionaries.com/definition/pseudo-
A pseudo-element is something that acts like an element, but is not an element.
In a word, "fake".
A more complete definition can be found here: http://www.dictionary.com/browse/pseudo
A pseudo element is a CSS-generated non-DOM element that is rendered as if it was a DOM element in the browser. But it doesn't actually add a node to the DOM. So if you inspected it in, say Chrome Dev Tools, you won't see it as a regular node.
Interestingly some screen-readers read pseudo-element content and others don't.
Playing around in Chrome, I noticed that if you copy a pseudo element (e.g. ::before) from the element inspector, and paste the results, you'll get the following:
<<pseudo:before>></<pseudo:before>>
I can't find any reference to this syntax, and it got me wondering:
Is this merely Chrome/webkit's way of allowing the inspection of pseudo elements in dev tools, or is this part of a wider spec?
Are there any cases/reasons that this may be of use to a developer, such as (probably unlikely) outputting this syntax directly to emulate CSS pseudo selector?
info: That's the The outerHTML attribute of the ::before pseudo-element in DOM.
As that element does not have any "real" content in it (it has could have a CSS content:'' property)...
...you only get the outerHTML when you copy (& paste)
I don't think and AFAIK, can't be emulate/simulate this pseudo-element directly in DOM.
Now.. outerHTML is supported in all mayor browser at these days... and with Javascript you can can have an approach emu/simulating, but I don't know if that's really your question.
Edit: Screenshot added so you can find the reference of outerHTML directly in Chrome DevTools.
#question-header h1:before {
content: 'Hi there! ';
color: red;
}
This might be a stupid question, but if I have something like this:
<div id="topDiv">
<header id="headerId" class="headerClass" style="display: block;">
::before
<div>...</div>
<div>...</div>
<div>...</div>
</header>
</div>
What does this 'before' in the html do?
I understand if I do the following in the CSS it adds these properties before every p element: (this is from a W3Schools example)
p::before {
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
You're seeing that ::before because that is how your browser's developer tools represents a CSS ::before pseudo-element in the document tree view.
If you literally had a string of text "::before" in your HTML file, it would do nothing special as it has no meaning in HTML; it would just show up as the text "::before" on your page.
I guess there can be two reason (Its via personal experience & observation not a valid reference for support)
1) It provides a visual representation of these pseudo selectors according to their meaning
::before before the div to which its applied to and ::after after the div to which its applied to
2) Pseudo selectors are used to insert some content:'' in HTML. So this provides a distinct representation. User can easily inspect which content is inserted in HTML via these pseudos.
And Yes its on each browser how the implement and show the pseudos.
good luck!
It is stating that you have a pseudo element in your html. Since it is not a 'real' element, you can't physically manipulate it like you can do with 'real' elements like div's and buttons.
You may also see ::after appearing in places, representing somewhere for either your id="headerId" or class="headerClass" has a ::before element declared.
the whole reason they are not declared like <after></after> or anything like this is because it is 'a ghost' or 'shadow' of a 'real element', and hence can only be styled/manipulated in the css before the html is rendered.
I was looking at a couple Twitter Bootstrap templates and I saw that a lot of ::before and ::after were inserted before and after div tags.
Can anybody tell me what they are?
The ::before and ::after pseudo elements are for css and are in no way bootstrap specific.
A quick example of some of the stuff it can do is this:
Say you have a basic p element:
<p>Hello</p>
In your css, if you had this:
p::before{
content:'Hi';
}
The p tag in html would now say:
HiHello
If it was
p::after{
content:'Hi';
}
It would be:
HelloHi
This can be very useful if you're using it with things such as phone numbers, or e-mail addresses e.g
p.phone_number::before{
content:'Phone #: ';
}
<p class='phone_number'> would now have Phone #: before it.
You can do very many things, even use it for styling.
If you look at The shapes of CSS, you will see that it's used on the more complex shapes.
One thing that ::before and ::after have in common and MUST have to work, is the content attribute. If it doesn't have a content attribute it wont show up. Don't mistake this as having a blank content, though, as this will work provided you give it a height/width like any other element.
::before and ::after aren't the only Pseudo elements though, here is a list:
::after
::before
::first-letter
::first-line
::selection
You can also double up on these elements:
For example:
p:hover::before{
content:'Hovered! ';
}
They represent pseudo-elements, which you don't include directly in your markup, but are available to you to create some neat effects with CSS. You have mentioned ::before and ::after, and they represent pseudo-elements that appear, shockingly, before and after your elements.
The whole list is included below and should be fairly self-explanatory:
::after
::before
::first-letter
::first-line
::selection
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Note the use of the double-colon, which is consistent with the spec. Sometimes you will see pseudo-elements specified with a single colon, but that was only because we needed to support browsers that didn't understand the double-colon syntax.