I have created some fairly elaborate DOM elements with an :after pseudo-element, and I'd like to be able to inspect and tweak them in either Chrome Inspector or Firebug or equivalent.
Despite this feature being mentioned in this WebKit/Safari blog post (dated 2010), I can't find this feature at all in either Chrome or Safari. Chrome does at least have checkboxes to inspect :hover, :visited and :active states, but :before and :after are nowhere to be seen.
Additionally, this blog post (dated 2009!) mentions this capability exists in the IE dev tools, but I'm currently using Mac OS, so this is no help to me. Additionally, IE is not a browser I'm primarily targeting.
Is there any way of inspecting these pseudo-elements?
EDIT: In addition to being wrong about Firebug being unable to inspect these elements, I've found Opera to be pretty good at Inspecting :before and :after elements out of the box.
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
As of Chrome 31 pseudo elements show in the elements panel as child elements of their parent as shown in the following image:
You can select them as you would a normal element but if you remove the content style then the pseudo element will also be removed and the devtools focus will change to it's parent.
It appears that inherited CSS styles are not viewable and you can't edit CSS content from the elements panel.
Chrome won't show :before and :after pseudo elements in the DOM-tree, if they miss "content" attribute. It should be set, even if it is set to nothing.
This won't show up:
:after {
background-color: red;
}
This will show up in the inspector:
:after {
content: "";
background-color: red;
}
Hope it helps.
At least since Chrome 62 there's a setting in DevTools to 'Show user agent shadow DOM' which displays additional pseudo-elements like input placeholders, which wouldn't show up in the DOM tree otherwise.
More information: https://stackoverflow.com/a/26853319/3963594
After a lot of frustration, I figured out that firefox doesn't show the pseudo elements in the document tree at all, but if you select the exact element which has pseudo element(s) defined, then the styles for its pseudo element(s) are shown in the style rules section on the right side. This is true for both firebug and the built-in inspect ("Q"), and I am shocked that nobody bothered to explain this clearly before.
Clearly, chrome/chromium's handling of pseudo elements is vastly superior, as they can be selected (both in the document tree and directly on the page) and inspected just like regular elements, with layout, properties and everything else, independent of their "owner".
Browser versions I'm using currently: Chromium 40.0.2214.91, Firefox 31.3.0.
Firefox has had this feature for awhile now, just right click, "inspect element", and see the before and after elements in the right panel of the inspector.
Select Element--> select hover checked ---> you can see ::before and after elements
Related
I need write rules for pseudo elements, but It seems IE11 browser is not showing ::after and ::before pseudo elements in its developer tools despite them being rendered on the page.
Is there way to edit them directly in browser, as it is possible on Chrome?
All styles in Internet Explorer appear in the styles tab on the right.
The html markup for pseudo elements is not displayed within the DOM inspector like other popular browsers.
I need write rules for pseudo elements specifically for Edge and IE, but It seems that both of these browsers are not showing ::after and ::before pseudo elements in their developer tools despite them being rendered on the page.
Is there way to edit them directly in browser, as it is possible on Chrome or Firefox?
Edge shows pseudo element styles on the given element, but after other (even inherited) styles....
So scroll down.
I'm trying to view/edit styles of an :after element in Developer Tools.
How may I find the rules associated to ::before and ::after pseudo-elements?
Found it. You select the element that has the :after and the :after styles will be listed with the other styles for that element.
In Chromium browsers (e.g. Chrome, Brave and Edge), open the element's collapsed content and click on the automatically added ::after element:
Firefox though has an independent Pseudo-elements section on the right pane after you click directly on the original element:
IE11 simply lists the ::after rule together with other element rules when you click on it:
I have read in this sitepoint page and quirksmode page about the new :empty pseudoclass.
Sitepoint said that even when there is dynamic content appended, the empty style will still take effect. It is noted that firefox was the one who behaves this way.
Quirksmode said that it discards the empty state when it it filled in with some elements or text. the demo on this site works in my browser (chrome 19). So i assumed only firefox would be buggy.
However I have this piece of code in my plugin, which dynamically fills up a list with items, it doesn't seem to work, here's a fiddle which appends list items, even if you click the button, the items won't appear until you try to debug it in the console (they magically appear when you click the <li> in the element tree).
Why is this happening, and is there a work around to "force-discard" the empty style?
I know there are other ways to do what I am doing in the fiddle (and currently doing one of these "other ways"), but the :empty method is a lot easier.
UPDATE:
added a remove item button. when the last item is removed, the list should disappear - still doesn't work. hmmm.. i'll try to check in another browser.
FIX
Temporary fix/alternative to using :empty and display:none is to have the element have zero width, height, borders, margins, and paddings. additionally, position:absolute to remove it from the flow.
The fiddle you provided works for me with FF10 and IE9. It only fails in Chrome (18+)
Not sure why this happens, as the quirksmode page works in Chrome as well..
For the force-discard it seems to be do-able by setting almost any css property with code..
example at http://jsfiddle.net/gaby/YprUV/9/
Update
Ok, i found this Chrome bug report that is about :empty selector misbehaving when used with display:none
It is marked as fixed, but perhaps we should re-oopen it..
Here is a test that does not use display:none (it just changes the background color) and it works just fine.. http://jsfiddle.net/YprUV/11/
I have a div that on hover will change positioning on an image and toggle a div via css. The list uses upper-alpha for styling. This CSS works fine in every browser except IE. The issue that I'm having is that in IE, after hovering over the div, it changes to 0. from A, B, C, etc..
Here's an example in jfiddle:
http://jsfiddle.net/YALdD/
if this works for you, just put the letters in the lists and get rid of the upper-alpha style, like this: http://jsfiddle.net/mjgasner/6J6Nf/3
Here's the workaround that is mentioned from the link in the comment above:
http://jsfiddle.net/mjgasner/94tu4/1/
It clearly doesn't work.
AND
IE won't render those as animations, as they are not supported.
http://www.w3schools.com/css3/css3_animations.asp
You can animate the color change in all browsers (even IE6!) with jQuery UI:
http://jqueryui.com/demos/animate/
Here is the link to W3Schools: http://www.w3schools.com/cssref/pr_list-style-type.asp
You can see all browsers supported for certain element.
If you need something else let us know.
What version of IE are you using?