CSS Pseudo-elements :: in 100 Seconds

Key Takeaways

pseudo elements there's more to your HTML than meets the eye there are parts of the UI that you can style with CSS that don't actually exist in your HTML markup take for example a form input that has some placeholder text the placeholder value is defined as an attribute on the element so how do we get ahold of the placeholder to style it the answer is we target a pseudo element in our CSS they always have a double colon to distinguish them from pseudo classes the difference is that a pseudo element represents an actual part of the Dom whereas a pseudo class represents the state of an element based on the user's interaction with it pseudo elements can make your code much more efficient take for example this HTML where the first letter in each paragraph is being wrapped in a span so it can be styled a far more efficient way to solve this problem is by targeting the first letter on the paragraph element the end result is much cleaner semantic HTML that's cool but by far the most powerful pseudo elements are before and after many but not all HTML elements can have content inserted before or after their inner content handled entirely from your CSS code for example we can target before and provide an empty string as the content property now that we've targeted this element you'll notice that it shows up in the browser's inspector we can style this element as if it were an empty span or div in our HTML and that can be very useful for creating advanced animations without polluting your HTML markup imagine we have a big unordered list and before each list item we have an emoji character instead of duplicating it in the markup we can simply add it as the content property to the before selector and once again we're left with code that is far more maintainable there's a few other pseudo elements that you should know about selection allows you to change the background and color of highlighted text in some browsers like chrome but not Firefox you can customize the scroll bar on scrollable elements before using the pseudo element always check for browser compatibility ones like spelling error might sound cool but they don't really have any browser support yet this has been pseudo elements in 100 seconds make sure to also check out pseudo classes thanks for watching and I will see you in the next one you