Tech | Code | Software dev Frontend: HTML, CSS, JS, React Backend: Python, SQL
Joined February 2023
- Tweets1.2K
- Following163
- Followers147
- Likes2.9K
Pinned Tweet
6 CSS pseudo-elements every beginner should know 👇
::before ::after ::first-line ::first-letter ::marker ::selection
Small selectors, lots of design control.
Watch the full breakdown: youtu.be/hP6hoCVOWbs
#CSS #WebDevelopment #Frontend
Leta retweeted
A tiny CSS detail many developers overlook:
::selection
It lets you customize how text looks when the user selects it.
Small detail. Better design consistency.
youtu.be/hP6hoCVOWbs
#CSS #UX #WebDesign
A tiny CSS detail many developers overlook:
::selection
It lets you customize how text looks when the user selects it.
Small detail. Better design consistency.
youtu.be/hP6hoCVOWbs
#CSS #UX #WebDesign
Leta retweeted
💜✨💜 CSS Pseudo Element after for beginners
👉 Learn more CSS Pseudo Elements: youtu.be/hP6hoCVOWbs
#learncss #cssbasics #csstutorial #hrmlforbeginners #learntocode #webdevelopment
💜✨💜 CSS Pseudo Element after for beginners
👉 Learn more CSS Pseudo Elements: youtu.be/hP6hoCVOWbs
#learncss #cssbasics #csstutorial #hrmlforbeginners #learntocode #webdevelopment
Leta retweeted
¿Sabías que en #CSS vanilla puedes hacer "bucles" en los que incrementas valores sin necesidad de usar #Javascript?
Leta retweeted
Try:
p::first-letter {
font-size: 30px;
}
One tiny pseudo-element can completely change the look of your typography.
youtu.be/hP6hoCVOWbs
#CSS #Typography #WebDesign
Try:
p::first-letter {
font-size: 30px;
}
One tiny pseudo-element can completely change the look of your typography.
youtu.be/hP6hoCVOWbs
#CSS #Typography #WebDesign
Leta retweeted
::first-line = entire first line ::first-letter = only the first letter
Easy distinction. Easy to remember.
youtu.be/hP6hoCVOWbs
#CSS #CodingTips #FrontendDevelopment
::first-line = entire first line ::first-letter = only the first letter
Easy distinction. Easy to remember.
youtu.be/hP6hoCVOWbs
#CSS #CodingTips #FrontendDevelopment
Leta retweeted
design tip 🌲 - size icons with 𝟷𝚌𝚊𝚙, not 𝚙𝚡.
𝟷𝚌𝚊𝚙 is the height of a capital letter in the current font, so the icon tracks the text at any size:
.𝚕𝚊𝚋𝚎𝚕 {
𝚍𝚒𝚜𝚙𝚕𝚊𝚢: 𝚏𝚕𝚎𝚡;
𝚊𝚕𝚒𝚐𝚗-𝚒𝚝𝚎𝚖𝚜: 𝚋𝚊𝚜𝚎𝚕𝚒𝚗𝚎;
}
.𝚕𝚊𝚋𝚎𝚕 𝚜𝚟𝚐 {
𝚋𝚕𝚘𝚌𝚔-𝚜𝚒𝚣𝚎: 𝟷𝚌𝚊𝚙;
}
𝚋𝚊𝚜𝚎𝚕𝚒𝚗𝚎 sits the icon on the text's baseline, so it spans the caps in any font. the width follows the 𝚟𝚒𝚎𝚠𝙱𝚘𝚡.
Leta retweeted
CSS variables have been quietly zeroing out styles. 😬
`revert-rule` is Baseline, newly available since September 2026 (Chrome 148, Firefox 150, Safari 27).
Before this, `padding: var(--pad)` with no --pad set gave you padding: 0, so you copy-pasted the default into every fallback.
Now ⤵️ fall back to whatever the cascade had.
