Tech | Code | Software dev Frontend: HTML, CSS, JS, React Backend: Python, SQL
Joined February 2023
- Tweets1.2K
- Following163
- Followers146
- Likes2.9K
Leta retweeted
6 pseudo-elements worth adding to your CSS toolbox:
➡️::before
➡️::after
➡️::first-line
➡️::first-letter
➡️::marker
➡️::selection
You don't need to memorize them. Just know when they're useful.
youtu.be/hP6hoCVOWbs
#CSS #WebDevelopment #LearnToCode
Leta retweeted
Normally:
Select text ➡️ browser's default colors.
With ::selection:
Select text ➡️ your custom colors.
Another small way CSS can improve the experience.
youtu.be/hP6hoCVOWbs
#CSS #Frontend #CSS3
Leta retweeted
The world 🌍 🌎 would have been far better if the mankind species could act like elephants 🐘 do… 😂😂😂
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
Leta retweeted
Your list bullets don't have to be boring.
With ::marker, you can customize them:
li::marker {
content: "🎨";
}
CSS gives you more control than you might expect.
youtu.be/hP6hoCVOWbs
#CSS #WebDev #Frontend
Leta retweeted
💜✨💜 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
Leta retweeted
::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
Resize your browser.
The words on the first line can change.
::first-line still targets the correct line automatically.
That's a neat CSS trick beginners should know.
youtu.be/hP6hoCVOWbs
#CSS #LearnCSS #WebDev
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.
Leta retweeted
Did you know CSS can automatically target the first line of a paragraph?
p::first-line {
color: red;
}
The browser determines where the first line ends.
youtu.be/hP6hoCVOWbs
#CSS #WebDevelopment #Frontend
