This past Saturday, I was playing around with a pet WordPress project. Like all WordPress development projects I work on, I use Google Chrome’s developer tools to make minor adjustments to html and css so I can see the updates immediately in the browser. Unlike all the times before, something new caught my attention:
Google recently added the pseudo elements before and after to the Elements Panel!
This might not seem all that interesting, but for a developer this makes life a whole lot easier. Before this update, there wasn’t an obvious way to tell that an html element had a before or after attached to it. We would literally have to select a node in the Elements Panel, then scroll halfway down the styles section to see if any before or after styling exists. Now this information is at a glance after inspecting an element!
If you are more interested in what the before and after pseudo elements are used for, a quick Google search will help you with that, I just wanted to bring to everyone’s attention that Google just made an exciting update to Google Chrome that enables us developers to be more efficient at our craft!