How to Add/Insert a Before or After Pseudo Element into Chrome's Inspector

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:

  1. Inspect the element you want to add the ::before or ::after to by right clicking it and going to "Inspect Element".

  2. 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.

    Sample Image

  3. Next, you will be able to edit the selector so add ::before / ::after to it:

    Sample Image

  4. 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:

Sample Image

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.

  1. Right-click in Styles panel
  2. Select Add New Rule from context menu
  3. Write new ::selection rule and add properties

Sample Image

Chrome has a small icon in the Styles panel that you can click to create a new Rule.

  1. Click New Style Rule button in Styles panel
  2. Write new ::selection rule and add properties

Sample Image

: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



Leave a reply



Submit