Tech | Code | Software dev Frontend: HTML, CSS, JS, React Backend: Python, SQL
Joined February 2023
- Tweets1.2K
- Following163
- Followers146
- Likes2.8K
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
ยฟ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
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.
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
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
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
Leta retweeted
css tip ๐ซ
๐๐๐๐๐๐-๐๐๐๐: ๐๐๐๐๐ stops a card's first and last child from adding their margins to its padding.
.๐๐๐๐ {
๐๐๐๐๐๐๐: ๐ธ๐บ๐๐ก;
๐๐๐๐๐๐-๐๐๐๐: ๐๐๐๐๐;
}
the space inside the card is the 24px you wrote, not 24px plus the heading's margin.
Leta retweeted
๐ธ a CSS function i barely see being used:
.๐๐๐๐ {
๐๐๐๐๐๐๐๐๐๐-๐๐๐๐๐: ๐๐๐๐๐-๐๐๐(
๐๐๐("๐๐๐๐.๐ ๐๐๐") ๐ท๐ก,
๐๐๐("๐๐๐๐@๐ธ๐ก.๐ ๐๐๐") ๐ธ๐ก
);
}
๐๐๐๐๐-๐๐๐() lets the browser pick the right image based on the screen's pixel density.
same idea as srcset, but for CSS background images.
Leta retweeted
CSS can generate visual content without adding it directly to your HTML.
That's one of the most useful things about ::before and ::after.
youtu.be/hP6hoCVOWbs
#CSS #WebDesign #Coding #Frontend
CSS can generate visual content without adding it directly to your HTML.
That's one of the most useful things about ::before and ::after.
youtu.be/hP6hoCVOWbs
#CSS #WebDesign #Coding #Frontend