CSS 'लाइन' की विशेषता की लाइन मोटाई संपादित करें

Question

चूंकि आप सीएसएस में किसी भी पाठ को रेखांकित कर सकते हैं जैसे:

H4 {text-decoration: underline;}

फिर आप उस 'लाइन' को कैसे संपादित कर सकते हैं, जो खींची गई है, लाइन पर आपको मिलने वाला रंग आसानी से 'कलर: रेड' के रूप में निर्दिष्ट किया जाता है, लेकिन कोई लाइन की ऊंचाई, यानी मोटाई को कैसे संपादित करता है?

Comments

h4 {border-bottom: 10px solid #000;}

— प्रणव Pran

@PranavKapoor - अच्छा लगा! यह शानदार है, बहुत-बहुत धन्यवाद। मैंने इस सीमा की चौड़ाई को 'ऑटो' में अब कैसे सेट कर दिया है, ताकि यह केवल H4 टैग को सीमित करे और न कि डिव की पूरी चौड़ाई को?

आप display:inline-blockयह सुनिश्चित करने के लिए जोड़ सकते हैं कि चौड़ाई सेट है, हालांकि, अंदर एक तत्व का उपयोग करना <h4>और आंतरिक स्टाइल करना बेहतर होगा। नीचे मेरे जवाब की जाँच करें।

— प्रणव Pran

@PranavKapoor - फिर से सही! आप CSS निंजा की तरह हैं। धन्यवाद दोस्त। मैंने नीचे दिए गए आपके उत्तर के बजाय टिप्पणी में दिए गए इस उत्तर का उपयोग किया है। इस तरह से मुझे लगता है कि बेहतर है क्योंकि आपको अपने पाठ को दूसरे <u> टैग में लपेटने की आवश्यकता नहीं है। आप इसे सीएसएस पक्ष से पूरी तरह से नियंत्रित करते हैं।

अंडरलाइन

— जुका के। कोर्पेला

Answer 1

इसे प्राप्त करने का एक तरीका यह है:

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

सीएसएस:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

यहाँ एक उदाहरण है: http://jsfiddle.net/AQ9rL/

Comments

... या पाठ की कई पंक्तियाँ

— cfx

उस स्थिति में आपको प्रत्येक पंक्ति से पाठ को लपेटना होगा, लाइन-ब्रेक से पहले और बाद <span>में सीमा-नीचे लागू करना होगा। यह एक ऐसा समाधान है जो गैर-हार्डकोड परिदृश्यों में दर्दनाक हो सकता है, हालांकि।

— फाबियान

@ यदि आप कर सकते हैं, तो आप अभी भी ऐसा कर सकते हैं display: inline;(लेकिन यह अब किसी भी प्रकार का ब्लॉक नहीं होगा, फिर भी किसी की मदद कर सकता है)

— jave.web

आपने मेरा दिन बना दिया। धन्यवाद

— Tessaracter

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

— जोएल करुणंगन

Answer 2

हाल ही में मुझे FF से निपटना पड़ा, जो रेखांकित किया गया था कि FF में पाठ से बहुत मोटी और बहुत दूर है, और बॉक्स-छाया की एक जोड़ी का उपयोग करके इससे निपटने का एक बेहतर तरीका पाया गया:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

पहले छाया को दूसरे के ऊपर रखा जाता है और इस तरह आप दोनों के 'px' मान को अलग करके दूसरे को नियंत्रित कर सकते हैं।

प्लस: विभिन्न रंग, मोटाई और स्थिति को रेखांकित करते हैं

माइनस: गैर-ठोस पृष्ठभूमि पर उपयोग नहीं किया जा सकता है

यहाँ मैंने कुछ उदाहरण दिए हैं: http://jsfiddle.net/xsL6rktx/

Comments

कितना साफ सुथरा सीमा-तल के संबंध में इसके लिए एक समर्थक (मेरे लिए कम से कम) यह है कि "लाइन" मोटाई पाठ की ओर बढ़ती है, जो पाठ और रेखा के बीच की खाई को कम विशाल बनाती है।

— विक्टर हैग्क्विस्ट

मुझे ऐसा करते समय अंडरलाइन के अलावा आधी पिक्सेल वर्टिकल लाइनें मिलती हैं।

— योहदिक्सन

ऐसा लगता है कि यह एक बिंदु पर एक सही जवाब था, लेकिन मुझे क्रोम 66 में तत्व के प्रत्येक पक्ष पर बहुत पतली ऊर्ध्वाधर रेखाएं मिलती हैं

— छोटा आदमी

सफेद के बजाय , पारदर्शी का उपयोग करना किसी भी पृष्ठभूमि के मामले में काम करेगा।

— जे। दादानिया

यह सबसे अच्छा जवाब है। HTML और शुद्ध CSS समाधान को बदलने की कोई आवश्यकता नहीं है जो कि सीमाओं की तरह पदों में परिवर्तन नहीं करेगा।

— जोएल करुणांगन

Answer 3

बहुत आसान ... छोटे फ़ॉन्ट और रेखांकन के साथ "स्पैन" तत्व के बाहर, और बड़े फ़ॉन्ट आकार के साथ "फ़ॉन्ट" तत्व के अंदर।

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

Comments

यदि आप अप्रचलित <font>टैग को टैग से बदलते हैं span, तो यह एकमात्र उत्तर होगा जो वास्तव में प्रश्न को संबोधित करता है।

— मैट

Answer 4

ऐसा करने का एक अन्य तरीका उस तत्व पर ": के बाद" (छद्म तत्व) का उपयोग करना है जिसे आप रेखांकित करना चाहते हैं।

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

Answer 5

text-decoration-thicknessवर्तमान में , CSS पाठ सजावट मॉड्यूल स्तर 4 का हिस्सा है । यह "एडिटर्स ड्राफ्ट" स्टेज पर है - इसलिए यह प्रगति पर है और बदलाव के अधीन है। जनवरी 2020 तक, यह केवल फ़ायरफ़ॉक्स और सफारी में समर्थित है ।

पाठ-सजावट-मोटाई सीएसएस संपत्ति सजावट लाइन की मोटाई, या चौड़ाई निर्धारित करती है, जो एक तत्व में पाठ पर उपयोग किया जाता है, जैसे कि लाइन-थ्रू, अंडरलाइन या ओवरलाइन।

a {
  text-decoration-thickness: 2px;
}

कोडपेन: https://codepen.io/mrotaru/pen/yLyLOgr (केवल फ़ायरफ़ॉक्स)

---

वहाँ भी है text-decoration-color, जो सीएसएस पाठ सजावट मॉड्यूल स्तर 3 का हिस्सा है । यह अधिक परिपक्व (कैंडिडेट सिफारिश) है और अधिकांश प्रमुख ब्राउज़रों (अपवाद एज और IE) में समर्थित है। बेशक इसका उपयोग लाइन की मोटाई को बदलने के लिए नहीं किया जा सकता है, लेकिन इसका उपयोग अधिक "म्यूट" अंडरलाइन (कोडपेन में भी दिखाया गया है) को प्राप्त करने के लिए किया जा सकता है।

Comments

यदि उपयोगकर्ता फ़ायरफ़ॉक्स पर है, तो सभी टेक्स्ट डेकोरेशन चीजों को एक्सेस किया जा सकता है text-decoration। मुझे नहीं पता कि यह उन सभी में शामिल करने की योजना है, लेकिन अगर ऐसा है तो भविष्य में यह बहुत अच्छा होगा। EDIT: यह इसमें काम करने के लिए एक कामकाजी मसौदा हैtext-decoration ।

— स्ट्रॉब्लेस्ड

Answer 6

मैं कुछ सरल करूँगा जैसे:

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}

• आप उन दोनों के बीच कब्जे का उपयोग line-heightया padding-bottomसेट कर सकते हैं
• आप display: inlineकिसी मामले में उपयोग कर सकते हैं

डेमो: http://jsfiddle.net/5580pqe8/

Comments

दुर्भाग्य से, मार्जिन-नीचे नकारात्मक मान प्राप्त नहीं कर सकता है।

— सोलेशियो

@soleshoe यह गलत है, आप एक तत्व के तल पर नकारात्मक मार्जिन हो सकता है।

— एलेक्स

Answer 7

background-imageयह भी एक रेखांकन बनाने के लिए इस्तेमाल किया जा सकता है।

इसे नीचे background-positionऔर क्षैतिज रूप से दोहराया जाना चाहिए । लाइन की चौड़ाई का उपयोग करके कुछ हद तक समायोजित किया जा सकता है background-size(पृष्ठभूमि तत्व के सामग्री बॉक्स तक सीमित है)।

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

Answer 8

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

अंतिम समाधान: http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

Comments

समस्या को अलग-अलग ब्राउज़रों द्वारा अलग-अलग तरीके से प्रस्तुत किया जा रहा है।

— जोएल करुणंगन

Answer 9

नए सीएसएस विकल्पों के जादू के लिए धन्यवाद, यह अब मूल रूप से संभव है:

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

अभी तक समर्थन अपेक्षाकृत खराब है । लेकिन यह अंततः ff के अलावा अन्य ब्राउज़रों में उतरेगा।

Answer 10

मेरा समाधान: https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

आप लाइन-ऊंचाई मूल्य के साथ रेखांकन स्थिति को समायोजित कर सकते हैं, सीमा-तल के साथ मोटाई और शैली को रेखांकित कर सकते हैं।

यदि आप किसी href को रेखांकित करना चाहते हैं तो डिफ़ॉल्ट अंडरलाइन व्यवहार को अक्षम करने से सावधान रहें।