ویژگی content در CSS

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