::before Pseudo-element
شبه عنصر before::
در CSS به خودی خود در ساختار html وجود ندارد. محتوایی که توسط شبه عنصر before::
نشان داده می شود بصورت display:inline
و قبل از عنصر html ایست که به آن نسبت داده می شود.
در یک مثال ساده از شبه عنصر before::
استفاده میکنیم تا به قسمتی از متن کوتیشن اضافه کنیم. در این مثال هم از before::
و هم از after::
استفاده می کنیم.
HTML
<p>کد نویسی</p>
CSS
body { font-family: tahoma; } p::before { content: ">> "; color: tomato; } p::after { content: " <<"; color: dodgerblue; }
شبه عناصر می توانند انواع مختلف محتوا را درج و نمایش دهند که از آن جمله می توان به کاراکتر، حروف یک کلمه و تصاویر اشاره کرد.
برای مثال می توان به نمونه های زیر اشاره کرد:
.element::before { content: url(img/image.png); /* یک تصویر برای مثال یک آیکون */ } .element::before { content: "(first Item...)"; /* حروف */ } .element::before { content: "\201C"; /* حروفی که بعد از رندر توسط یونی کد تبدیل به کاراکتر میشوند */ }
از این ویژگی معمولا در موارد نمایشی و گرافیکی استفاده می شود. برای مثال :
HTML
<ul> <li>sample text</li> <li>sample text</li> <li>sample text</li> <li>sample text</li> <li>sample text</li> </ul>
css
li { list-style: none; } i::before { content: " \00bb"; color: coral; margin-right: 7px; }
پشتیبانی مرورگرها
تمام مرورگرها از این شبه عنصر در CSS پشتیبانی می کنند.