अंडरलाइन की उपस्थिति को कैसे नियंत्रित करें

अंडरलाइन को दृश्य अपील और पठनीयता बढ़ाने के लिए तैयार किया जा सकता है। टेक्स्ट-सजावट:अंडरलाइन की लंबाई और स्थिति में हेरफेर करने के लिए, ग्रेडिएंट्स के उपयोग से जुड़ी एक सरल लेकिन प्रभावी तकनीक है:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center;
  background-size: 80% 2px;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}

स्थिति समायोजन:

• लाइन को स्थानांतरित करने के लिए, पृष्ठभूमि-स्थिति संपत्ति को समायोजित करें।
• उदाहरण के लिए, पृष्ठभूमि-स्थिति: तली छोड़ें; पाठ के बाईं ओर की रेखा को संरेखित करता है।

लंबाई समायोजन:

• लंबाई को नियंत्रित करने के लिए, पृष्ठभूमि-आकार की संपत्ति को समायोजित करें।
• उदाहरण के लिए, पृष्ठभूमि-आकार: 50% 1px; एक छोटी लाइन बनाता है।

अतिरिक्त अनुकूलन:

• टेक्स्ट के करीब: पैडिंग-बॉटम: 0; लाइन को टेक्स्ट के करीब लाता है।
• टेक्स्ट से दूर: पैडिंग-बॉटम: 10px; लाइन और टेक्स्ट के बीच की दूरी बढ़ जाती है। );.