एंकर टैग पर सीमा नीचे, जो कई लाइनों पर काम करता है और इनलाइन ब्लॉक/ब्लॉक डिस्प्ले

Question

मेरे पास मेरी साइट पर कुछ एंकर टैग हैं जो मुझे डिज़ाइन के अनुसार 'कस्टम' रेखांकित करने की आवश्यकता है।

समस्या यह है कि जब लिंक टेक्स्ट कई पंक्तियों में टूट जाता है तो नीचे की सीमा केवल नीचे की रेखा/एंकर के नीचे लागू होती है। मैं एंकर लिंक को इनलाइन का डिस्प्ले देकर हल कर सकता हूं, लेकिन फिर मैं उन्हें मार्जिन टॉप देने की क्षमता खो देता हूं।

क्या कोई तरीका है कि मैं 2px की एक रेखांकन लिंक दे सकता हूं और कई पंक्तियों में काम करता हूं जबकि उन्हें मार्जिन टॉप देने में भी सक्षम होता है?

उदाहरण बेला:

https://jsfiddle.net/mjxfzrwk/

कोड सिर्फ बैठाना:

.custom-underline { 
 
    border-bottom: 2px solid red; 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
} 
 
.standard-underline { 
 
    text-decoration: underline; 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
} 
 
.inline { 
 
    display: inline; 
 
} 
 
.container { 
 
    width: 100px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    line-height: 29px; 
 
    font-size: 20px; 
 
}

<div class="container"> 
 
    <a class="custom-underline" href="">This has a good underline</a> 
 
    <br/> 
 
    <a class="standard-underline" href="">This has a standard underline</a> 
 
    <br /> 
 
    <a class="custom-underline inline" href="">This has a good underline but display inline removed top margin</a> 
 
</div>

Answer 1

को पार करने वाली आप नीचे दिए गए जैसे :before छद्म तत्व का उपयोग कर सकते । Updated fiddle

.inline:before{ 
    content: ' '; 
    display: block; 
    margin-top: 20px; 
} 

Answer 2

खैर रंग के लिए आप इस

a{ 
    text-decoration: underline; 
    -moz-text-decoration-color: red; /* Code for Firefox */ 
    text-decoration-color: red; 
} 

उपयोग कर सकते हैं

लेकिन रिक्ति बात text-decoration:underline

Answer 3

के साथ नहीं किया जा सकता है आप भी span के अंदर अपने पाठ लपेट और लागू कर सकते हैं border-bottom

a { 
 
    width: 100px; 
 
    display: block; 
 
    text-decoration: none; 
 
    margin-top: 50px; 
 
} 
 
span { 
 
    border-bottom: 2px solid red; 
 
}

<a href=""><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quisquam.</span></a>

Answer 4

उपयोग अपने कोड में अंतिम विकल्प के रूप में प्रदर्शन इनलाइन विधि और फिर अपने सीएसएस में शैलियों नीचे जोड़ने का प्रयास करें

.inline:before{ 
    content: " "; 
    height:20px; 
    display: block; 
}