Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/pseudo-first-line-styling.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown28 linesFree

rules/pseudo-first-line-styling.md

1---
2title: Use ::first-line for Typographic Treatments
3impact: LOW
4tags: pseudo, first-line, typography
5---
6 
7## Use ::first-line for Typographic Treatments
8 
9Use ::first-line for drop-cap-adjacent styling without JavaScript or hardcoded spans.
10 
11**Incorrect (manual span):**
12 
13```tsx
14<p>
15  <span className={styles["first-line"]}>The opening line of this paragraph</span>
16  is styled differently from the rest.
17</p>
18```
19 
20**Correct (native ::first-line):**
21 
22```css
23.article p:first-of-type::first-line {
24  font-variant-caps: small-caps;
25  font-weight: var(--font-weight-medium);
26}
27```
28

Preparing the source view

User Interface Wiki

rules/pseudo-first-line-styling.md