::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 پشتیبانی می کنند.
