CSS - Pseudo-element - ::before Property
The ::before pseudo-element in CSS is used to add content before the selected element with the content property. It allows you to insert text, images, or decorative elements, without modifying the HTML structure. It is inline by default.
Syntax
selector::before { /* ... */ }
Use of ::before pseudo-element to add content is not advised, as it may not be accessible to the screen readers.
CSS ::before Example
Here is a simple example of usage of ::before pseudo-element:
<html> <head> <style> p { color: royalblue; font-size: 1.5em; border: 2px solid black; text-transform: lowercase; } p::before { content: url(images/logo.png) ; position: relative; } </style> </head> <body> <div> <p>pseudo-element ::before</p> </div> </body> </html>
Here is another example, where the usage of ::before pseudo-element is shown:
<html> <head> <style> #flavor { display: block; font-size: 18px; color: black; width: 500px; } li { padding: 10px 16px; font-size: 16px; color: black; background-color: #fff; margin-top: 25px; width: 300px; transition: all 0.3s ease; } li::before { content: url(images/smiley.png); } </style> </head> <body> <form> <ul id="flavor"> Ice cream Flavors: <li> Cookie dough</li> <li> Pistachio</li> <li> Cookies & Cream</li> <li> Cotton Candy</li> <li> Lemon & Raspberry Sorbet</li> </ul> </form> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google