CSS में टेक्स्ट डेकोरेशन

text-decoration प्रॉपर्टी

CSS में टेक्स्ट डेकोरेशन के लिए text-decoration प्रॉपर्टी का उपयोग एक शॉर्टहैंड के रूप में निम्नलिखित प्रॉपर्टीज के लिए किया जाता है:

text-decoration-line text-decoration-color text-decoration-style

सब-प्रॉपर्टीज:

• text-decoration-line: underline, overline, line-through, blink (अप्रचलित), none
• text-decoration-color: डेकोरेशन लाइन का रंग
• text-decoration-style: solid, double, dotted, dashed, wavy
• text-decoration-thickness: लाइन की मोटाई (नया)
• text-underline-offset: अंडरलाइन ऑफसेट (नया)

उदाहरण 1: शॉर्टहैंड सिंटैक्स

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>विवरण</h1>
<p class="demo">परीक्षा केंद्र ABC कॉलेज के पास।</p>
<p class="demo2">परीक्षा सुबह 9 बजे शुरू होती है।</p>
</body>
</html>

आउटपुट

टेक्स्ट के ऊपर और नीचे लाइन (डिफ़ॉल्ट रंग और स्टाइल)।

उदाहरण 2: अलग-अलग प्रॉपर्टीज के साथ

<!DOCTYPE html>
<html>
<head>
<style>
p {
  writing-mode: vertical-rl;
  text-decoration-line: overline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
</style>
</head>
<body>
<h1>डेमो हेडिंग</h1>
<p>यह डेमो टेक्स्ट है।</p>
</body>
</html>

आउटपुट

वर्टिकल टेक्स्ट (writing-mode: vertical-rl) के ऊपर लाल लहरदार ओवरलाइन।

पूरा शॉर्टहैंड सिंटैक्स (मॉडर्न):

text-decoration: [line] [style] [color] [thickness] [offset];

उदाहरण:

.fancy-underline {
  text-decoration: underline wavy red 3px 4px;
  /* line style color thickness offset */
}

सामान्य उपयोग के मामले:

• text-decoration: underline - लिंक्स (डिफ़ॉल्ट)
• text-decoration: line-through - हटाया गया/सेल प्राइस
• text-decoration: overline underline - जोर देना
• text-decoration: none - लिंक्स से अंडरलाइन हटाना

text-decoration vs border-bottom: