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

https://thecsspodcast.libsyn.com/014-pseudo-elements

Learn">https://thecsspodcast.libsyn.com/014-pseud... about https://abs.twimg.com/emoji/v2/... draggable="false" alt="9️⃣" title="Tastenkappe Ziffer 9" aria-label="Emoji: Tastenkappe Ziffer 9"> things I learned in the thread https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">

https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 1">

pseudo elements has 2 colons in front ::
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🆚" title="Quadratisches VS" aria-label="Emoji: Quadratisches VS">
pseudo class which have 1 colon in front :

https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2">

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

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📝" title="Memo" aria-label="Emoji: Memo"> to create the pseudo-element, use `content` property
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📝" title="Memo" aria-label="Emoji: Memo"> content will be read by screen reader
https://abs.twimg.com/emoji/v2/... draggable="false" alt="📝" title="Memo" aria-label="Emoji: Memo"> cannot be used by replaced elements, eg: <img>, <video>

https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> ::first-letter https://abs.twimg.com/emoji/v2/... draggable="false" alt="🆚" title="Quadratisches VS" aria-label="Emoji: Quadratisches VS"> ::first-line

https://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4"> ::backdrop allows you to style the backdrop of the fullscreen video and <dialog>

https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> ::marker allows you to style the marker of a list item

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📝" title="Memo" aria-label="Emoji: Memo"> not widely supported by the browser yet

https://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6"> ::selection allows you to style highlighted text

https://abs.twimg.com/emoji/v2/... draggable="false" alt="7️⃣" title="Tastenkappe Ziffer 7" aria-label="Emoji: Tastenkappe Ziffer 7"> ::placeholder allows you to style placeholder text in <input> and <textarea>

https://abs.twimg.com/emoji/v2/... draggable="false" alt="8️⃣" title="Tastenkappe Ziffer 8" aria-label="Emoji: Tastenkappe Ziffer 8"> ::cue allows you to style captions and other cues in media with Video Text Tracks (VTT) tracks

https://abs.twimg.com/emoji/v2/... draggable="false" alt="9️⃣" title="Tastenkappe Ziffer 9" aria-label="Emoji: Tastenkappe Ziffer 9"> ::grammar-error & ::spelling-error allows you to style texts that the browser flagged as grammatically incorrect or spelling error

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧪" title="Test tube" aria-label="Emoji: Test tube"> it is still experimental