← All CSS Chapters
LoOPCode Home
13. Pseudo-classes & Elements
hover, focus, first-child, before/after.
Is chapter me cover hoga:
:hover :focus
:first-child
::before ::after
Use cases
1. Pseudo examples
•
:hover
— mouse upar
•
:focus
— keyboard/accessibility
•
::before / ::after
— extra decorative content
<!DOCTYPE html> <html> <head> <style> a { color: #0d9488; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s; } a:hover, a:focus { border-bottom-color: #0d9488; outline: none; } li:first-child { font-weight: 700; color: #0f766e; } </style> </head> <body> <p><a href="#">Focus / hover link</a></p> <ul> <li>First item (bold)</li> <li>Second</li> <li>Third</li> </ul> </body> </html>
▶ Run Code
☐
Mark complete
← Variables
Best Practices →