سودوالمانهای CSS
سودوکلاس وقتی وضعیت عوض می‌شود ظاهر را عوض می‌کند (:hover، :focus). سودو‌المان یک قدم جلوتر است: می‌توانید یک تکه از متن را استایل بدهید، یا یک جعبهٔ کوچک قبل یا بعد از محتوای واقعی بسازید — با دو دونقطه (::) و بدون تگ اضافه در HTML.
سودو‌المان یعنی چه؟
سودو‌المان کلمه‌ای است که با :: به سلکتور می‌چسبد. چیزی را هدف می‌گیرد که در markup یک عنصر کامل نیست: حرف اول، خط اول، یا یک جعبهٔ ساختگی قبل/بعد محتوا. برای ::before و ::after معمولاً باید content بگذارید تا چیزی دیده شود.
چهار سودو‌المان پرکاربرد
اول این‌ها را یاد بگیرید. شکل قدیمی با یک دونقطه (:before) هنوز در خیلی مرورگرها کار می‌کند، ولی املای مدرن با دو دونقطه را بنویسید.
📊 سودوالمانهای روزمرهٔ CSS
| سودو‌المان | چه چیزی را استایل می‌کند | مثال |
|---|---|---|
::before |
جعبهٔ قبل از محتوای عنصر | p::before |
::after |
جعبهٔ بعد از محتوای عنصر | a::after |
::first-letter |
حرف اول یک بلوک متن | p::first-letter |
::first-line |
خط اول یک بلوک متن | p::first-line |
قبل از محتوا — ::before و content
::before یک جعبهٔ مجازی قبل از متن واقعی می‌سازد. تقریباً همیشه content می‌گذارید — یک رشته، یا "" برای جعبهٔ خالی تزئینی.
قبل — علامت نقل‌قول باز
css.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}content را فراموش نکنید
بدون content خیلی از قوانین ::before / ::after هیچی نشان نمی‌دهند. برای نوار رنگی یا آیکون پس‌زمینه، content: "" کافی است.
بعد از محتوا — ::after
::after همان ایده است، ولی بعد از محتوا — برای واحد، نشان کوچک، یا پسوند.
بعد — نشانهٔ لینک بیرونی
cssa.external::after {
content: " ↗";
font-size: 0.85em;
}معنی لازم را اینجا قایم نکنید
صفحه‌خوان و بعضی ابزارها با محتوای تولیدشده یکسان رفتار نمی‌کنند. چیزی که کاربر حتماً باید بفهمد را فقط داخل ::before یا ::after نگذارید؛ متن واقعی در HTML بماند.
حرف اول — ::first-letter
::first-letter حرف اول متن یک بلوک را می‌گیرد — همان ظاهر کلاسیک حرف بزرگ ابتدای پاراگراف.
حرف اول — کاراکتر بزرگ آغازین
css.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}خط اول — ::first-line
::first-line فقط اولین خط دیده‌شده را استایل می‌دهد — نه «جملهٔ اول»، بلکه همان خطی که مرورگر با شکستن خطوط ساخته.
خط اول — کمی پررنگ‌تر
css.lead::first-line {
font-weight: 600;
color: #334155;
}جعبهٔ خالی تزئینی
گاهی فقط یک نوار رنگی می‌خواهید، بدون متن. همان content: "" کافی است.
before خالی — نوار تزئینی
css.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}عادت‌های خوب
- سودو‌المان = دو دونقطه (
::before)؛ سودوکلاس = یک دونقطه (:hover) - روی
::before/::afterاگر چیزی باید دیده شود،contentبگذارید - متن ضروری را در HTML نگه دارید، نه فقط در محتوای تولیدشده
::first-letterو::first-lineروی بلوک‌های متن‌دار کار می‌کنند- حتی اگر
:beforeقدیمی کار کرد،::مدرن را ترجیح بدهید
خودتان امتحان کنید
- صفحهٔ کوتاهی با پاراگراف
.quote، پاراگراف.lead، لینکa.externalو یک.cardبا متن بسازید. .quote::before { content: "“"; color: #0f766e; }را بگذارید و علامت نقل‌قول را ببینید.- روی لینک با class
externalقانونa.external::after { content: " ↗"; }را بزنید. .lead::first-letterرا بزرگ و فیروزه‌ای کنید؛.lead::first-lineرا باfont-weight: 600استایل دهید..card::before { content: ""; display: block; height: 4px; background: #0f766e; }را برای نوار بالا اضافه کنید.
اشتباهات رایج
- نوشتن
:beforeوقتی منظورتان وضعیت مثل:hoverاست — وضعیت یک دونقطه؛ جعبهٔ ساختگی دو دونقطه - فراموش کردن
contentتا::before/::afterظاهر نشوند - گذاشتن تنها نسخهٔ یک هشدار یا برچسب داخل
::after - انتظار معجزه از
::first-letterروی عنصر خالی یا فقط‌تصویر - یکی گرفتن
::first-lineبا «جملهٔ اول» — شکستن خط مرورگر خط را تعیین می‌کند
خلاصه
- سودو‌المان با
::تکهٔ عنصر یا جعبهٔ تولیدشده را استایل می‌کند ::before/::afterبهcontent(رشته یا"") نیاز دارند::first-letterو::first-lineابتدای بلوک متن را می‌گیرند- معنی حیاتی را در HTML نگه دارید
- یک دونقطه = سودوکلاس؛ دو دونقطه = سودو‌المان
- با نقل‌قول، پسوند لینک و پاراگراف lead تمرین کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود