در دنیای CSS، ابزارهای زیادی برای استایلدهی وجود دارد، اما یکی از جذابترین و کمتر شناختهشدهترین آنها شبهعنصرها (Pseudo-elements) هستند. این ویژگیها به ما اجازه میدهند بدون افزودن عناصر اضافی به HTML، محتوای بصری جدیدی ایجاد کنیم و استایلهای خاصی را روی بخشهای مشخصی از متن یا المانها اعمال کنیم.
در این مقاله، قصد دارم بهصورت کامل و عملی با مثالهای واقعی، شما را با این ویژگی قدرتمند در CSS آشنا کنم.
شبهعنصر (Pseudo-element) چیست؟
شبهعنصرها به شما این امکان را میدهند که بخشی از یک المان را استایلدهی کنید یا محتوای مجازی جدیدی قبل یا بعد از آن اضافه کنید، بدون اینکه در HTML تغییری ایجاد شود.
نحوه نوشتن شبهعنصر:
selector::pseudo-element {
/* استایل دهی به شبه عنصر */
}
💡 توجه: در نسخههای قدیمیتر CSS، شبهعنصرها با : (مثل :before) نوشته میشدند، اما در CSS3 این استاندارد تغییر کرد و باید از :: (مثل ::before) استفاده کنیم. البته مرورگرها هنوز نسخه قدیمی را پشتیبانی میکنند، اما بهتر است از استاندارد جدید استفاده کنیم.
انواع شبهعنصرها در CSS
1- ::before و ::after (افزودن محتوای مجازی)
دو مورد از پرکاربردترین شبهعنصرها، ::before و ::after هستند. اینها به شما اجازه میدهند محتوای جدیدی قبل یا بعد از یک عنصر اضافه کنید.
✅ مثال: افزودن آیکون قبل و بعد از متن دکمه
button::before {
content: "🔥 "; /* نمایش آیکون قبل از دکمه*/
}
button::after {
content: " ✔"; /* نمایش آیکون بعد از دکمه*/
}
اگر این CSS را روی <button>ثبت نام</button> اعمال کنیم، نتیجه به این شکل خواهد بود:
🔥 ثبت نام ✔
کاربردهای رایج ::before و ::after:
- افزودن آیکون یا نماد به المانها
- ایجاد افکتهای گرافیکی بدون نیاز به HTML اضافی
- ساختن شکلهای پیچیده با CSS
2- ::first-letter (تغییر استایل اولین حرف متن)
این شبهعنصر به ما اجازه میدهد اولین حرف متن را تغییر دهیم، مثلاً آن را بزرگتر کنیم، رنگ بدهیم یا استایل خاصی اعمال کنیم.
✅ مثال: بزرگتر کردن اولین حرف پاراگراف
p::first-letter {
font-size: 2em;
color: red;
font-weight: bold;
}
نتیجه:
“س” در عبارت”سلام دنیا“ به شکل بزرگتر و قرمز نمایش داده میشود.
کاربردهای رایج ::first-letter:
- بولد کردن حرف اول در یک عبارت یا جمله
3- ::first-line (استایلدهی به اولین خط متن)
گاهی نیاز داریم فقط اولین خط یک پاراگراف را استایلدهی کنیم. این کار با ::first-line ممکن است.
✅ مثال: بولد کردن و تغییر رنگ اولین خط متن
p::first-line {
font-weight: bold;
color: blue;
}
نتیجه:
فقط اولین خط پاراگراف بولد و آبی رنگ خواهد شد.
کاربردهای رایج ::first-line:
- هایلایت کردن مقدمه پاراگرافها در مقالات طولانی
4- ::selection (تغییر استایل متن هنگام انتخاب شدن)
این شبهعنصر برای استایلدهی متن انتخابشده (هایلایت شده) توسط کاربر استفاده میشود.
✅ مثال: تغییر رنگ پسزمینه و متن هنگام انتخاب شدن
p::selection {
background: yellow;
color: black;
}
برای دیدن خروجی این کد ، این قسمت از متن رو انتخاب کنید تا متوجه تفاوت رنگ موقع انتخاب بشید
5- ::placeholder (استایلدهی متن پیشفرض در input)
اگر بخواهید متن پیشفرض داخل فیلدهای ورودی (input) را تغییر دهید، میتوانید از ::placeholder استفاده کنید.
✅ مثال: تغییر رنگ و استایل متن پیشفرض در فیلد ورودی
input::placeholder {
color: gray;
font-style: italic;
}
نمونه:
نمونههای پیشرفته با شبهعنصرها
علاوه بر موارد ساده ای که مثال هاشون رو در بالا گفتم، با شبه عنصرها یا Pseudo-Elements میشه افکت های پیشرفته تر و جذاب تری هم به صفحه اضافه کرد . مزیت استفاده از این شبه عناصر ، جلوگیری از ایجاد المنت های html اضافی و سبک تر شدن صفحه است.
ساخت دکمه با افکت نوری متحرک با ::before
.button {
position: relative;
display: inline-block;
padding: 15px 30px;
font-size: 20px;
font-weight: bold;
color: white;
background: #ff5722;
border-radius: 10px;
border: none;
cursor: pointer;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.button::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: top 0.3s ease;
}
.button:hover::before {
top: 0;
}
برای استفاده از این کد باید یک دکمه با کلاس button بسازید و این استایل ها رو براش بنویسید.
نتیجه:
آموزش های بیشتر درباره شبه عناصر css: W3Schools.com
شما هم تجربیات خودتون درباره استفاده از شبه عناصر یا نمونه کارهای جذابتون رو توی کامنتا برامون بنویسید.
برای آموزش های بیشتر درباره طراحی وب و وردپرس ، بلاگ من رو دنبال کنید
برای مشاهده دوره های آموزشی به این صفحه مراجعه کنید