सीएसएस के साथ टेक्स्ट अंडरलाइन रंगों को अनुकूलित करना

वेब डिज़ाइन में, जानकारी पर जोर देने या हाइलाइट करने के लिए टेक्स्ट में अंडरलाइन जोड़ना एक आम बात है। हालाँकि, यदि आप अंडरलाइन का रंग बदलकर एक अनोखा स्पर्श जोड़ना चाहते हैं तो क्या होगा? क्या यह संभव है?

हां, सीएसएस का उपयोग करके पाठ के नीचे की रेखा का रंग बदलना संभव है। यहां दो विधियां हैं जिनका आप उपयोग कर सकते हैं:

विधि 1: टेक्स्ट-सजावट-रंग का उपयोग करना

सबसे सीधा तरीका टेक्स्ट-सजावट-रंग संपत्ति का उपयोग करना है। यह प्रॉपर्टी अंडरलाइन के रंग को निर्दिष्ट करती है, जिससे आप इसे टेक्स्ट के रंग से स्वतंत्र रूप से अनुकूलित कर सकते हैं।

उदाहरण के लिए, नीले अंडरलाइन के साथ लाल टेक्स्ट बनाने के लिए, आप निम्नलिखित सीएसएस का उपयोग करेंगे:

text-decoration-color: blue;

विधि 2: बॉर्डर-बॉटम का उपयोग करना

एक वैकल्पिक तरीका बॉर्डर-बॉटम प्रॉपर्टी का उपयोग करना है। यह प्रॉपर्टी टेक्स्ट के नीचे एक बॉर्डर बनाती है, जो एक अंडरलाइन का अनुकरण कर सकती है। बॉर्डर-बॉटम-कलर प्रॉपर्टी सेट करके, आप अंडरलाइन का रंग निर्दिष्ट कर सकते हैं।

उदाहरण के लिए, यहां बताया गया है कि आप बॉर्डर-बॉटम का उपयोग करके विधि 1 के समान प्रभाव कैसे प्राप्त करेंगे:

border-bottom: 1px solid blue;
text-decoration: none;

नोट: टेक्स्ट-सजावट-रंग संपत्ति आधुनिक ब्राउज़र द्वारा समर्थित है। यदि आपको पुराने ब्राउज़र का समर्थन करने की आवश्यकता है, तो आप अनुकूलता के लिए बॉर्डर-बॉटम पद्धति का उपयोग करना चाह सकते हैं।