content प्रॉपर्टी

content प्रॉपर्टी टैग्स में मनमाना जेनरेट किया गया टेक्स्ट डालने की अनुमति देती है। इसका उपयोग प्स्यूडोएलिमेंट्स after और before के साथ संयुक्त रूप से किया जाता है।

सिंटैक्स

cssसिलेक्टर::after {
  content: 'टेक्स्ट';
}

cssसिलेक्टर::before {
  content: 'टेक्स्ट';
}

उदाहरण

आइए li टैग के टेक्स्ट की शुरुआत और अंत में अतिरिक्त टेक्स्ट डालें:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli::before {
  content: '!!!';
}
li::after {
  content: '???';
}

Результат:

उदाहरण

डाले गए टेक्स्ट पर विभिन्न स्टाइल लागू किए जा सकते हैं। आइए, उदाहरण के लिए, इस टेक्स्ट को किसी रंग में रंगें:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli::before {
  color: red;
  content: '!!!';
}
li::after {
  color: green;
  content: '???';
}

Результат:

यह भी देखें