چگونه از Pseudo-Element ::target-text استفاده کنیم؟
در زندگی روز مره‌ای که همه چیز به سرعت در حال تغییر است، ما همیشه به دنبال راه‌هایی برای بهبود تجربیات کاربران اینترنتی هستیم. زمانی که شما لینکی را در صفحه‌ی وب خود مرور می‌کنید و می‌خواهید که بخشی از متنهای به خصوص را برجسته کنید، می‌توانید از pseudo-element جدیدی به نام ::target-text استفاده کنید. این عنصر به شما اجازه می‌دهد تا زمانی که عنصری در صفحه هدف قرار می‌گیرد (به طور مثال وقتی کاربر بر روی لینک مربوطه کلیک می‌کند)، آن را استایل دهی خاصی کنید.
هدف اصلی از استفاده از ::target-text برجسته کردن و نمایش بهتر محتواهایی است که کاربران آنها را می‌خوانند یا به دنبالشان هستند. این روش می‌تواند در افزایش دسترسی‌پذیری سایت و بهبود تجربه کاربری بسیار مؤثر باشد، چرا که کاربر سریع‌تر می‌تواند محتوای مورد نظر خود را پیدا کند.
شما می‌توانید برای این عنصر استایل‌های مختلفی اعمال کنید. مثلا می‌توانید رنگ پس‌زمینه آن را تغییر دهید یا به آن انیمیشن بدهید تا وقتی به آن قسمتی از صفحه هدایت شد، به شکلی زیباتر و جلب‌تر توجه نشان دهد. این ابزار بسیار مناسب برای راهنمایی کاربران و جلب توجه به بخش‌های مهم در محتوای طولانی است.
به عنوان مثال، فرض کنید مقاله‌ای طولانی در وب‌سایت خود دارید و می‌خواهید وقتی کاربر بر روی لینکی از فهرست مطالب کلیک می‌کند، بخشی از متن که به آن هدایت می‌شود، برجسته‌تر شود تا کاربر راحت‌تر بتواند آن بخش را بخواند. در این مواقع، می‌توانید از ::target-text استفاده کنید.
p:target-text {
background-color: yellow;
transition: background-color 0.5s ease;
}
a[href="#section1"]:target ~ #section1 p:target-text {
background-color: lightblue;
}
توضیحات کد
با استفاده از p:target-text قسمت‌هایی از متن پاراگراف که هدف قرار گرفته‌اند، را با پس‌زمینه زرد نمایش می‌دهیم.
خط دوم: transition برای ایجاد یک انیمیشن نرم در تغییر رنگ پس‌زمینه.
خط ششم: تعیین استایل خاص (در اینجا رنگ پس‌زمینه آبی روشن) برای زمانی که لینک به قسمتی خاص از صفحه می‌رود و آن بخش از متن به عنوان هدف متناظر قرار می‌گیرد.