مثال
إدراج المثال التالي URL بين قوسين بعد كل وصلة:
a:after
{
content: " (" attr(href) ")";
}
انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
يتم استخدام الخاصية المحتوى مع: قبل و: بعد عناصر الزائفة، لإدراج المحتوى المقدم.
| القيمة الافتراضية: | normal |
|---|---|
| وارث: | no |
| Animatable: | no. Read about animatable |
| الإصدار: | CSS2 |
| جافا سكريبت بناء الجملة: | You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| خاصية | |||||
|---|---|---|---|---|---|
| content | 1.0 | ثمانية | 1.0 | 1.0 | 4.0 |
Note: IE8 يعتمد فقط على الممتلكات المحتوى إذا تم تحديد DOCTYPE!.
CSS بناء الجملة
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;قيم الملكية
| القيمة | وصف | مثال |
|---|---|---|
| normal | القيمة الافتراضية. مجموعات المحتوى، إذا تم تحديدها، إلى وضعها الطبيعي، الذي الافتراضي هو "none" (which is nothing) | Try it » |
| none | يحدد المحتوى، إذا تم تحديدها، لاشيء | Try it » |
| counter | يحدد محتوى عداد | Try it » |
| attr (attribute) | يحدد محتوى واحدا من selector's سمة | Try it » |
| string | يحدد المحتوى إلى النص الذي تحدده | Try it » |
| open-quote | يحدد محتوى أن يكون اقتباسا افتتاح | Try it » |
| close-quote | يحدد محتوى أن يكون الاقتباس إغلاق | Try it » |
| no-open-quote | يزيل الاقتباس فتح من المحتوى، إذا تم تحديدها | Try it » |
| no-close-quote | يزيل الاقتباس إغلاق من المحتوى، إذا تم تحديدها | Try it » |
| url( url ) | يحدد المحتوى ليكون نوعا من وسائل الإعلام (an image, a sound, a video, etc.) | Try it » |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
مزيد من الأمثلة
مثال
كيفية إضافة ألوان رصاصة لل <ul> أو <ol> عن طريق إزالة الرصاص الافتراضية الخاصة بهم وإضافة كيان HTML التي تبدو مثل الرصاص (•) :
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* Insert content that
looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
} انها محاولة لنفسك » صفحات ذات صلة
CSS المرجع : قبل عنصر الزائفة
CSS المرجع : بعد عنصر الزائفة