CSS - Pseudo-element - ::after Property
The ::after pseudo-element in CSS is used to add content after 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::after { /* ... */ }
Use of ::after pseudo-element to add content is not advised, as it may not be accessible to the screen readers.
CSS ::after Example
Here is a simple example of usage of ::after pseudo-element:
<html> <head> <style> p { color: royalblue; font-size: 1.5em; border: 2px solid black; text-transform: lowercase; } p::after { content: url(images/logo.png) ; position: relative; } </style> </head> <body> <div> <p>With pseudo-element ::after</p> </div> </body> </html>
Here is another example, where the usage of ::after pseudo-element alongwith other elements is demonstrated:
<html> <head> <style> body { width: 100%; height: 100vh; display: grid; } .glow { padding: 10px; width: 250px; height: 50px; color: #fff; background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 20px; } .glow::before { content: ''; background: linear-gradient(60deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -4px; left:-4px; background-size: 400%; z-index: -1; filter: blur(15px); width: calc(100% + 6px); height: calc(100% + 6px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; border-radius: 10px; } .glow:active { color: rgb(246, 235, 235) } .glow:active::after { background: transparent; } .glow:hover::before { opacity: 1; } .glow::after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #111; left: 0; top: 0; border-radius: 20px; background: linear-gradient(60deg, #293deb, #d019b4, #e6ac0c, #d95909, #d2ef13, #0ce45f, #a872e1, #e70db8, #2f09c8); } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } </style> </head> <body> <button class="glow" type="button">HOVER OVER & CLICK!</button> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google