CSS का उपयोग करके लिंक्स के डिफ़ॉल्ट अंडरलाइन हटाना

लिंक अंडरलाइन हटाना

CSS का उपयोग करके लिंक्स के डिफ़ॉल्ट अंडरलाइन हटाने के लिए text-decoration: none सेट करें।

उदाहरण 1: बेसिक अंडरलाइन हटाना

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: blue;
  text-decoration: none;
}
</style>
</head>
<body>
<h1>डेमो हेडिंग</h1>
<div>
  <p>यह <a href="https://tutorialspoint.com">रेफरेंस</a> है</p>
</div>
</body>
</html>

उदाहरण 2: सभी स्टेट्स में अंडरलाइन हटाना

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: blue;
  text-decoration: none;
}
a:hover {
  color: blue;
  text-decoration: none;
}
a:active {
  color: blue;
  text-decoration: none;
}
</style>
</head>
</head>
<body>
<h1>डेमो हेडिंग</h1>
<div>
  <p>यह <a href="https://tutorialspoint.com">रेफरेंस</a> है</p>
</div>
</body>
</html>

मॉडर्न शॉर्टहैंड:

/* :any-link दोनों :link और :visited को कवर करता है */
:any-link {
  color: blue;
  text-decoration: none;
}

:any-link:hover,
:any-link:active {
  color: blue;
  text-decoration: none;
}

अंडरलाइन के विकल्प (दृश्य संकेत के लिए):

/* बॉर्डर बॉटम - अधिक नियंत्रण */
a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  text-underline-offset: 3px;  /* केवल text-decoration पर काम करता है */
}

/* बैकग्राउंड ग्रेडिएंट अंडरलाइन */
a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

/* text-decoration के साथ मॉडर्न कंट्रोल */
a {
  text-decoration: underline;
  text-decoration-color: #0066cc;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:hover {
  text-decoration-thickness: 3px;
}

एक्सेसिबिलिटी चेतावनी:

अंडरलाइन पूरी तरह हटाने से लिंक्स पहचानने में मुश्किल हो सकते हैं, विशेषकर रंग-अंध उपयोगकर्ताओं के लिए। हमेशा वैकल्पिक दृश्य संकेत प्रदान करें:

• रंग अंतर (कम से कम 3:1 कंट्रास्ट)
• होवर/फोकस पर अंडरलाइन दिखाएं
• बोल्ड/इटैलिक स्टाइल
• आइकन/एरो संकेतक

सर्वोत्तम अभ्यास:

a {
  color: #0066cc;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
a:hover,
a:focus {
  border-bottom-color: #0066cc;
  text-decoration: underline;  /* फोकस पर वापस दिखाएं */
}