content Property
ویژگی content
در CSS توسط سودو المنت های before::
و after::
برای درج محتوای مورد نظر در عنصر استفاده می شود.
محتوای تولید شده توسط ویژگی content
می تواند یک رشته متنی، تصویر، یونیکد های CSS و glyph icon باشد. استفاده ترکیبی ازین مقادیر نیز امکان است.
نکته: توجه داشته باشیدکه ویژگی content
باید همراه در سودو المنت های before::
و after::
استفاده شود و در غیر اینصورت این عناصر نشان داده نخواهند شد. شما همیشه باید این ویژگی را استفاده کنید. در بسیاری موارد اگر نخواهیم محتوای این ویژگی را نشان دهیم آن را خالی می گذاریم. این موارد اکثرا زمانیست که می خوایم از این ویژگی استفاده بصری و گرافیکی کنیم.
در مثال های زیر می توانیم به نحوه عملکرد این ویژگی بپردازیم:
برای دیدن مثال های بیشتر می توانید به سودو کلاس های after::
و before::
نگاه کنید:
html
<h2>عناوین مطالب</h2> <ol> <li>مقالات موبوط به طراحی وب</li> <li class="new-entry">مرجع CSS</li> <li>مقلالات موبوط با جاوااسکریپت</li> <li class="new-entry">مرجع HTML</li> </ol>
css
.new-entry::after { content: " جدید!"; color: red; }
مشاهده و ویرایش کد در حالت تمام صفحه
همچنین در مثال زیر میبینیم:
html
<h1>5</h1> <p>According to Sir Tim Berners-Lee, <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q> We must understand that there is nothing fundamentally wrong with building on the contributions of others. </p> <h1>6</h1> <p>According to the Mozilla Manifesto, <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals must have the ability to shape the Internet and their own experiences on the Internet.</q> Therefore, we can infer that contributing to the open web can protect our own individual experiences on it. </p>
css
q { color: blue; } q::before { content: open-quote; } q::after { content: close-quote; } h1::before { content: "Chapter "; /* فاصله گذاشته شده یک فاصله خالی بین این محتوا و */ /* قرار می دهد html مابقی محتوا در ساختار */ }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این سودو کلاس در CSS پشتیبانی می کنند.