CSS में टेक्स्ट और अंडरलाइनिंग के अंतर को कैसे बढ़ाएं

Question

सीएसएस का उपयोग करते हुए, जब पाठ ने text-decoration:underlineआवेदन किया है, तो क्या पाठ और अंडरलाइन के बीच की दूरी बढ़ाना संभव है?

Comments

यह बिल्कुल वैसा नहीं है जैसा आप पूछ रहे थे, बल्कि यह इस विषय पर एक दिलचस्प लेख था: सीएसएस डिज़ाइन: कस्टम रेखांकित

— पीटर रोवेल

दूरी का उपयोग एक फ़ॉन्ट द्वारा निर्धारित किया जाता है। वेब-सुरक्षित फोंट का प्रयास करें।

— अलेक्सई डैनचेनकोव

CSS3 में इन दिनों बहुत सारे नए टेक्स्ट-डेकोरेशन गुण हैं। कृपया alligator.io/css/text-decoration उदाहरण देखें: text-underline-position: under;और text-decoration-skip: ink;कृपया ध्यान दें कि यह संभवतः पुराने ब्राउज़रों के साथ संगत नहीं है।

— Chocolata

एक और अच्छा समाधान

— w3spi

text-underline-offsetयहाँ के लिए वोट करें: bugs.chromium.org/p/chromium/issues/…

— मार्क फिशर

Answer 1

नहीं, लेकिन आप जैसे कुछ border-bottom: 1px solid #000और के साथ जा सकते हैं padding-bottom: 3px।

यदि आप "अंडरलाइन" का एक ही रंग चाहते हैं (जो मेरे उदाहरण में एक सीमा है), तो आप बस रंग घोषणा को छोड़ देते हैं, border-bottom-width: 1pxऔर border-bottom-style: solid।

मल्टीलाइन के लिए, आप तत्व के अंदर एक स्पैन में मल्टीलाइन टेक्स्ट को लपेट सकते हैं। उदाहरण के लिए, <a href="#"><span>insert multiline texts here</span></a>केवल जोड़ें border-bottomऔर paddingपर <span>- डेमो

Comments

इस ट्रिक के साथ मेरी एकमात्र समस्या यह है कि जब मैं div ऊंचाई के बराबर लाइन-ऊंचाई का उपयोग कर रहा हूं और फिर वर्टिकल-एलाइन: मध्य; इसे केंद्रित करने के लिए, फिर मैं इस ट्रिक का उपयोग नहीं कर सकता क्योंकि तब अंडरलाइन div के नीचे समाप्त होता है।

— डेविडेब

@deweydb: कंटेनर डिव के साथ-साथ पैडिंग-बॉटम को कैसे जोड़ा जाए? jsfiddle.net/dYfjc/1

— chelmertz

+1 /> मुझे फॉन्ट के रंग को विरासत में देने के लिए रंग संपत्ति छोड़ने के बारे में नहीं पता था - जो कि भविष्य में बहुत पसीना और आँसू बचाएगा!

— लैरी

मुझे पूरा यकीन नहीं है कि इस जवाब के इतने सारे कारण हैं। यह पूरी तरह से बहुस्तरीय ग्रंथों के साथ काम नहीं करता है।

मल्टीलाइन के लिए, आप तत्व के अंदर एक स्पैन में मल्टीलाइन टेक्स्ट को लपेट सकते हैं। उदाहरण के लिए, <a href="#"><span>insert multiline texts here</span></a>बस बॉर्डर-तल और पैडिंग जोड़ें <span>। jsfiddle.net/Aishaterr/vrpb2ey7/1

— डैनियल हर्नांडेज़

Answer 2

अपडेट 2019: सीएसएस वर्किंग ग्रुप ने टेक्स्ट डेकोरेशन लेवल 4 के लिए एक ड्राफ्ट प्रकाशित किया है जो एक नई प्रॉपर्टी text-underline-offset(साथ ही) जोड़ देगाtext-decoration-thickness एक अंडरलाइन के सटीक प्लेसमेंट पर नियंत्रण की अनुमति देने के ) देगा। इस लेखन के रूप में, यह एक प्रारंभिक चरण का मसौदा है और किसी भी ब्राउज़र द्वारा लागू नहीं किया गया है, लेकिन ऐसा लगता है कि यह अंततः तकनीक को अप्रचलित कर देगा।

नीचे मूल उत्तर।

---

border-bottomसीधे उपयोग करने के साथ समस्या यह है कि यहाँ तक कि padding-bottom: 0, रेखांकन अच्छा दिखने के लिए पाठ से बहुत दूर हो जाता है। इसलिए हमारे पास अभी भी पूर्ण नियंत्रण नहीं है।

एक समाधान जो आपको पिक्सेल सटीकता देता है वह है :afterछद्म तत्व का उपयोग करना :

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

बदल कर bottomसंपत्ति को (ऋणात्मक संख्या ठीक है) आप अंडरलाइन को ठीक उसी स्थिति में रख सकते हैं जहां आप इसे चाहते हैं।

सावधान रहने की इस तकनीक के साथ एक समस्या यह है कि यह लाइन रैप्स के साथ थोड़ा अजीब व्यवहार करता है।

Comments

यह मेरे विशेष मुद्दे के लिए काम नहीं करेगा, लेकिन यह एक शानदार चाल है। +1

चारों ओर अच्छा काम, लेकिन यह उन एंकरों के लिए काम नहीं करेगा जो कई लाइनों का विस्तार करते हैं

— 13:53

@ अंतिम-बच्चा यह अंडरलाइन से बेहतर है, लेकिन टेक्स्ट रैप के साथ यह हर लाइन के लिए काम नहीं करेगा

— निशांत

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

— एंडर्स लिंडन

किसी ऐसे व्यक्ति को बताने की कल्पना करें जो या तो वेब विकास में नया है, एक ग्राफिक डिजाइनर, एक औसत उपयोगकर्ता या आपकी माँ, कि यह वही है जो पाठ के बीच कुछ नियंत्रित स्थान जोड़ने के लिए आवश्यक है और यह रेखांकित किया गया है और वे आश्चर्य करेंगे कि आप अपने जीवन के साथ क्या कर रहे हैं ।

— मार्कग्यू

Answer 3

आप इसका उपयोग कर सकते हैं text-underline-position: under

अधिक विवरण के लिए यहां देखें: https://css-tricks.com/almanac/properties/t/text-underline.pp/

ब्राउज़र संगतता भी देखें ।

Comments

धन्यवाद! यदि आप एक धराशायी अंडरलाइन करने की कोशिश कर रहे हैं और देखें कि यह पाठ और रेखा के नीचे के बीच की जगह के बिना खींची गई है, तो यह समस्या को ठीक करता है।

— जोनाथन क्रॉस

यह बिना किसी वर्कअराउंड के आधुनिक ब्राउज़रों के लिए सही उत्तर है।

— पारस शाह

यह फ़ायरफ़ॉक्स में काम नहीं करता है, विक्रेता-उपसर्ग के साथ भी नहीं - लेकिन यह एक डब्ल्यू 3 सी कल्पना में है: w3.org/TR/css-text-decor-3/#text-underline-position-property । अन्य प्रासंगिक संसाधन: quackit.com/css/css3/properties/css_text-underline-position.cfm

— rosell.dk

इस क्षण के रूप में, यह केवल क्रोम ब्राउज़र में ही काम करता है, और अन्य ब्राउज़रों के लिए कोई समाधान नहीं है।

— मीर

खैर, इस टिप्पणी की तारीख के रूप में, मैं फ़ायरफ़ॉक्स में भी इस काम को देखता हूं ।

— जराड

Answer 4

यहाँ है जो मेरे लिए अच्छी तरह से काम करता है।

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>

Comments

यह ध्यान रखना महत्वपूर्ण है कि डेवलपर केtext-underline-position अनुसार फ़ायरफ़ॉक्स के तहत समर्थित नहीं है।

— pm.millailla.org/en-US/docs/Web/CSS/…

बहुत ही रोचक। महान कॉलआउट। धन्यवाद!

— जॉर्डन स्टारक

उसी लिंक के अनुसार, 74 से शुरू होने वाले फ़ायरफ़ॉक्स में समर्थित है।

— जीसर्ज

Answer 5

दृश्य शैली के विवरण में प्राप्त करना 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 पर पाया है , लेकिन लेख को नीचे ले जाया गया है।

Comments

दुर्भाग्य से उत्सुक .io लिंक अब काम नहीं करता है। क्या आपको याद है कि डिसेंडर्स को अच्छे दिखने के लिए हैक क्या था?

— कानो

@ कानो - मेरा मानना ​​है कि यह ठोस पृष्ठभूमि के समान रंग में पाठ-छाया का उपयोग कर रहा था।

— स्क्वायरकैंडी

इसके अलावा, ऊपर दी गई तकनीक से आप पाठ से अलग रंग का रंग सेट कर सकते हैं, इसलिए कभी-कभी मैं इसे पाठ की तुलना में हल्का होने के लिए सेट करता हूं, जो कि पठनीयता के लिए समस्या से कम अवरोही के साथ टकराव करता है।

— स्क्वायरकैंडी

Answer 6

मुझे पता है कि यह एक पुराना सवाल है, लेकिन सिंगल लाइन टेक्स्ट सेटिंग के लिए display: inline-blockऔर फिर heightएक सीमा और पाठ के बीच की दूरी को नियंत्रित करने के लिए मेरे लिए अच्छी तरह से काम किया है।

Comments

मुझे ऊंचाई निर्धारित करने की आवश्यकता नहीं थी। मैंने अभी इसे एक और div में लपेटा है और जैसा कि मैं चाहता था कि इसे केंद्र में रखा जाए, मैंने सिर्फ आउट-डिव पर टेक्स्ट-संरेखित किया।

— गाय लोव

Answer 7

@ अंतिम-बच्चे का उत्तर एक महान उत्तर है!

हालाँकि, मेरे H2 में एक सीमा जोड़ने से पाठ की तुलना में एक अंडरलाइन का उत्पादन हुआ।

यदि आप अपने सीएसएस को गतिशील रूप से लिख रहे हैं, या अगर मेरी तरह आप भाग्यशाली हैं और जानते हैं कि पाठ क्या होगा, तो आप निम्न कार्य कर सकते हैं:

1. contentकिसी चीज़ को सही लंबाई में बदलना (यानी वही)

2. पाठ) फ़ॉन्ट रंग को transparent(या rgba(0,0,0,0)) पर सेट करें

को रेखांकित करने के <h2>Processing</h2>लिए (उदाहरण के लिए), अंतिम बच्चे के कोड को बदल दें:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

Comments

H2s ब्लॉक एलीमेंट हैं जो यह समझा सकते हैं कि अंडरलाइन टेक्स्ट से अधिक लंबा क्यों था। शायद display: inline-blockइसे ठीक कर देंगे। पाठ को contentएक हैक की तरह दिखता है जो कई तरीकों से टूट सकता है।

— अंतिम बच्चे

Answer 8

मेरी बेला देखें ।

आपको सीमा चौड़ाई संपत्ति और गद्दी संपत्ति का उपयोग करने की आवश्यकता होगी। मैंने इसे ठंडा दिखाने के लिए कुछ एनीमेशन जोड़े:

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}

<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>

Answer 9

बहुस्तरीय ग्रंथों या लिंक के लिए एक विकल्प, आप एक ब्लॉक तत्व के अंदर एक स्पैन में अपने ग्रंथों को लपेट सकते हैं।

<a href="#">
    <span>insert multiline texts here</span>
</a> 

तो आप बस सीमा-तल जोड़ सकते हैं और पैडिंग कर सकते हैं <span>।

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

आप इस बेला का उल्लेख कर सकते हैं। https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

Answer 10

अगर तुम चाहते हो:

• बहु
• छितराया हुआ
• कस्टम नीचे गद्दी के साथ
• रैपर के बिना

रेखांकित करें, आप 1 पिक्सेल ऊंचाई पृष्ठभूमि छवि का उपयोग कर सकते हैं repeat-xऔर 100% 100%स्थिति:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

आप दूसरे 100%को किसी चीज़ की तरह बदल सकते हैं pxया emअंडरलाइन की ऊर्ध्वाधर स्थिति को समायोजित करने के लिए। calcयदि आप वर्टिकल पैडिंग जोड़ना चाहते हैं, तो आप इसका उपयोग कर सकते हैं , जैसे:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

बेशक, आप अपने खुद के बेस 64 पीएनजी पैटर्न को किसी अन्य रंग, ऊंचाई और डिजाइन के साथ भी बना सकते हैं, जैसे यहां: http://www.patternify.com/ - बस 2x1 पर चौकोर चौड़ाई और ऊंचाई सेट करें।

प्रेरणा का स्रोत: http://alistapart.com/article/customunderlines

Answer 11

यदि आप उपयोग कर रहे हैं text-decoration: underline; , तो आप अंडरलाइन और टेक्स्ट के बीच स्थान जोड़ सकते हैंtext-underline-position: under;

अधिक पाठ-रेखांकित-स्थिति गुणों के लिए, आप यहाँ देख सकते हैं

Answer 12

मैं इसे U (अंडरलाइन टैग) का उपयोग करने में सक्षम था

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>

Answer 13

यही है वह जो मेरे द्वारा उपयोग किया जाता है:

एचटीएमएल:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

सीएसएस:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }

Answer 14

मैं क्या उपयोग करता हूं:

<span style="border-bottom: 1px solid black"> Enter text here </span>