شبه‌عناصر (Pseudo-elements) در CSS ابزاری قدرتمند هستند که به ما این امکان را می‌دهند که استایل خاصی را به بخش‌های خاصی از محتوا اضافه کنیم بدون این که نیاز به تغییر در HTML داشته باشیم. این روش به ویژه زمانی که می‌خواهیم عناصر اضافی را در یک صفحه وب ایجاد کنیم یا استایل خاصی را به بخش خاصی از محتوا اضافه کنیم بسیار مفید است.
در عمل، شبه‌عناصر معمولاً برای ایجاد افکت‌های زیبا، افزودن محتوای قبل و یا بعد از یک عنصر، و ایجاد استایل‌های خاص استفاده می‌شوند. به عنوان مثال، ما می‌توانیم با استفاده از شبه‌عنصر ::before یا ::after محتوای اضافی مانند تصاویر یا آیکون‌ها را قبل یا بعد از یک عنصر اضافه کنیم.
شبه‌عنصر دیگر که بسیار مورد استفاده قرار می‌گیرد، ::first-line است که به ما امکان می‌دهد اولین خط یک عنصر متنی را به صورت خاصی استایل دهیم.
استفاده از شبه‌عناصر به طراحان وب این فرصت را می‌دهد که بدون انجام تغییر در HTML، طراحی‌های خلاقانه‌تر و تعاملی‌تری ایجاد کنند که این موضوع باعث می‌شود مدیرت و نگهداری وب سایت ساده‌تر شود.
در ادامه یک مثال ساده از استفاده از شبه‌عنصر ::after آمده است که نحوه افزودن محتوا بعد از یک عنصر HTML را نشان می‌دهد:
p::after {
content: ' - خوانده شد';
color: gray;
font-size: 12px;
}
توضیح خط به خط
p::after: این سبک برای هر عنصر p (پاراگراف) اعمال می‌شود و محتوای تعیین شده را بعد از متن اصلی نمایش می‌دهد.content: ' - خوانده شد';: این خط محتوا را بعد از عنصر اصلی اضافه می‌کند. در اینجا متن ' - خوانده شد' بعد از هر پاراگراف نمایش داده می‌شود.color: gray;: رنگ متن اضافی را به خاکستری تغییر می‌دهد.font-size: 12px;: اندازه فونت متن اضافی را به 12 پیکسل تنظیم می‌کند.