How do I add / insert a before or after pseudo element into Chrome's Inspector?
This is the easiest way and the way I do it:
Inspect the element you want to add the ::before or ::after to by right clicking it and going to "Inspect Element".
Now in the Developer Tools Console, click on the plus sign icon aka. "New Style Rule". See the image below, the plus sign is next to the "Toggle Element State" button.
Next, you will be able to edit the selector so add ::before / ::after to it:
Now edit the content to whatever you like, i.e.
Like so:
.grp-row::before {
content: '> ';
}
That's all there is to it :)
How can I inspect and tweak :before and :after pseudo-elements in-browser?
In Chrome's Dev tools, the styles of a pseudo-element are visible in the panel:
Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclaration
object:
getComputedStyle(document.querySelector('html > body'), ':before');
window.getComputedStyle
document.querySelector
Manipulate ::selection pseudo-element in developer tools
You can accomplish this in Internet Explorer and Firefox by right-clicking inside the Styles panel and selecting New Rule.
- Right-click in Styles panel
- Select Add New Rule from context menu
- Write new
::selection
rule and add properties
Chrome has a small icon in the Styles panel that you can click to create a new Rule.
- Click New Style Rule button in Styles panel
- Write new
::selection
rule and add properties
:before and :after pseudo elements on html tag is wonky in Chrome
Your CSS should work as expected, as your pseudo-element should be drawn in the context of the initial containing block (the viewport, represented by the html
element) anyway, which is exactly what Firefox is doing.
Your particular issue was reported as a Chrome bug, but it hasn't been addressed. As a workaround, you can apply your pseudo-element to body
instead:
body:before {
content: "";
display: block;
background-color: #000;
width: 100%;
height: 138px;
bottom: 0px;
position: absolute;
}
Depending on your layout, you may need to either keep your html
rule or change it to body
as well.
Google Chrome Dev Tools remove element's :after from DOM when :after display is none
There does not appear to be an option to disable this behavior, but a workaround is to select the originating element to which the ::after
you were switching off was attached and you'll find its ::after
pseudo-element CSS rule in the Styles panel (at the bottom within sections called "Pseudo ::after element"), complete with the display: none
declaration you just added.
Chrome sometimes incorrectly displaying '⇱' symbol used as css pseudo-element
You can try using the CSS content code of ⇱ to avoid encoding issues:
a::before { content: '\21F1';}
<a href="#">Test</a>
Related Topics
CSS H1 - Only as Wide as the Text
Position a Div Container on the Right Side
Vertical Align Center Image in Fixed Size Div
Css3 Animation - Smooth Infinite Cycle
Android Browser - Remove Outline Border When Anchor Is Focused
Set Color for Extra Page Parts Visible During Rubber Band Scroll
What Exactly Does the 'Only' Keyword Do in CSS Media Queries
How to Fix This Print Layout with Float (In Print Stylesheet)
Find Definition of CSS Class in External Stylesheet
Jstl If-Statement Inside HTML-Attribute
Add Content to the Bottom of the Last Page
Angular Flex-Layout with Ngfor
Spring MVC Where to Put CSS/Js/Img Files
Why Does a Fixed Background-Image Move When Scrolling on Ie