दृश्य शैली के विवरण में प्राप्त करना text-decoration:underline
बहुत अधिक निरर्थक है, इसलिए आपको किसी प्रकार के हैक को हटाने के लिए जाना होगा text-decoration:underline
और इसे किसी अन्य चीज़ के साथ प्रतिस्थापित करना होगा जब तक कि सीएसएस का एक जादुई दूर-दूर का भविष्य का संस्करण हमें अधिक नियंत्रण न दे। ।
यह मेरे लिए काम किया:
a {
background-image: linear-gradient(
180deg, rgba(0,0,0,0),
rgba(0,0,0,0) 81%,
#222222 81.1%,
#222222 85%,
rgba(0,0,0,0) 85.1%,
rgba(0,0,0,0)
);
text-decoration: none;
}
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
- टेक्स्ट से लाइन कितनी दूर है यह बदलने के लिए% मान (81% और 85%) समायोजित करें
- लाइन मोटाई बदलने के लिए दो% मूल्यों के बीच अंतर को समायोजित करें
- अंडरलाइन रंग बदलने के लिए रंग मान (# 222222) समायोजित करें
- कई लाइन इनलाइन तत्वों के साथ काम करता है
- किसी भी पृष्ठभूमि के साथ काम करता है
यहाँ कुछ पीछे संगतता के लिए सभी स्वामित्व गुणों के साथ एक संस्करण है:
a {
/* This code generated from: http://colorzilla.com/gradient-editor/ */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */
text-decoration: none;
}
अद्यतन: SASSY संस्करण
मैंने इसके लिए एक स्कैस मिक्सिन बनाया। यदि आप SASS का उपयोग नहीं करते हैं, तो ऊपर दिया गया नियमित संस्करण अभी भी बहुत अच्छा काम करता है ...
@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
background-image: linear-gradient(
180deg, rgba(0,0,0,0),
rgba(0,0,0,0) $top,
$color $top + 0.1%,
$color $bottom,
rgba(0,0,0,0) $bottom + 0.1%,
rgba(0,0,0,0)
);
text-decoration: none;
}
फिर इसे इस तरह उपयोग करें:
$blue = #0054a6;
a {
color: $blue;
@include fake-underline(lighten($blue,20%));
}
a.thick {
color: $blue;
@include fake-underline(lighten($blue,40%), 86%, 99%);
}
अद्यतन 2: Descenders Tip
यदि आपके पास एक ठोस पृष्ठभूमि का रंग है, तो पतले text-stroke
या text-shadow
उसी रंग में जोड़ने की कोशिश करें, जिससे आपकी पृष्ठभूमि अवरोही अच्छी लगे।
श्रेय
यह उस तकनीक का सरलीकृत संस्करण है जिसे मैंने मूल रूप से https://eager.io/app/smartunderline पर पाया है , लेकिन लेख को नीचे ले जाया गया है।