Thread by @lihautan

Learned a ton of pseudo elements, that i didnt know existed, in this week's #CSSpodcast by @Una and @argyleink

thecsspodcast.libsyn.com/014-pseudo-ele…

Learn about 9️⃣ things I learned in the thread 👇👇

1️⃣

pseudo elements has 2 colons in front ::
🆚
pseudo class which have 1 colon in front :

2️⃣

::before and ::after targets the pseudo-element that is the 1st child and last child of the element respectively

📝 to create the pseudo-element, use `content` property
📝 content will be read by screen reader
📝 cannot be used by replaced elements, eg: <img>, <video>

3️⃣ ::first-letter 🆚 ::first-line

4️⃣ ::backdrop allows you to style the backdrop of the fullscreen video and <dialog>

5️⃣ ::marker allows you to style the marker of a list item

📝 not widely supported by the browser yet

6️⃣ ::selection allows you to style highlighted text

7️⃣ ::placeholder allows you to style placeholder text in <input> and <textarea>

8️⃣ ::cue allows you to style captions and other cues in media with Video Text Tracks (VTT) tracks

9️⃣ ::grammar-error & ::spelling-error allows you to style texts that the browser flagged as grammatically incorrect or spelling error

🧪 it is still experimental