पहले से केवल अंडरलाइन कैसे निकालें?

94

मेरे पास एक :beforeतीर का उपयोग करने के लिए स्टाइल लिंक का एक सेट है ।

यह सभी ब्राउज़र में अच्छा लगता है, लेकिन जब मैं लिंक को अंडरलाइन लागू करता हूं, तो मैं उस :beforeभाग (तीर) पर रेखांकित नहीं करना चाहता ।

उदाहरण के लिए jsfiddle देखें: http://jsfiddle.net/r42e5/1/

क्या इसे हटाना संभव है? मैं जिस परीक्षण-शैली के साथ बैठा, #test p a:hover:beforeवह (फायरबग के अनुसार) लागू होती है, लेकिन अंडरलाइन अभी भी है।

इससे बचने का कोई उपाय?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

स्निपेट का विस्तार करें

— OptimusCrime
स्रोत

खैर, आप स्पष्ट रूप से एक सूची चाहते हैं ... DIV / P संयोजन के बजाय एक UL तत्व का उपयोग करें। सूचियों के साथ आपको गोलियां (या डिस्क, ...) मुफ्त में

— मिलेंगी

अपने मामले में पैराग्राफ के बजाय कस्टम बुलेट के साथ सूची का उपयोग क्यों नहीं करें? अन्यथा पेरेंट पी से पहले सामग्री को लागू करें, न कि खुद को लिंक करने के लिए।

— युवा

के संभावित डुप्लिकेट stackoverflow.com/questions/8536015/...

— Oriol

171

क्या इसे हटाना संभव है?

हां, यदि आप इनलाइन तत्व की प्रदर्शन शैली को display:inline(डिफ़ॉल्ट) से display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

ऐसा इसलिए है क्योंकि CSS चश्मा कहते हैं :

जब एक इनलाइन तत्व पर निर्दिष्ट या प्रचारित किया जाता है, तो यह उस तत्व द्वारा उत्पन्न सभी बॉक्स को प्रभावित करता है, और आगे किसी भी इन-फ्लो ब्लॉक-स्तरीय बक्से में प्रचारित किया जाता है जो इनलाइन को विभाजित करते हैं (खंड 9.2.1.1 देखें)। [...] अन्य सभी तत्वों के लिए यह किसी भी प्रवाह वाले बच्चों में प्रचारित किया जाता है। ध्यान दें कि टेक्स्ट डेकोरेशन फ़्लोटिंग और बिल्कुल पोस्टेड वंशजों के लिए नहीं किया जाता है, न ही इनलाइन ब्लॉक और इनलाइन टेबल जैसे परमाणु इनलाइन स्तर के वंशजों की सामग्री के लिए ।

(जोर मेरा)

डेमो: http://jsfiddle.net/r42e5/10/

_{@Oriol को वर्कअराउंड प्रदान करने के लिए धन्यवाद जिसने मुझे ऐनक की जांच करने के लिए प्रेरित किया और देखा कि वर्कअराउंड कानूनी है।}

— Phrogz
स्रोत

2

आप के text-decoration:underlineसाथ एक मूल तत्व के लिए एक लागू ओवरराइड कर सकते हैं display:inline-block। एक उदाहरण देखें: jsfiddle.net/aZdhN/1 । फिर, इस तरह से प्रश्नकर्ता की समस्या को हल किया जा सकता है: stackoverflow.com/a/17347068/1529630

— ओरियल

3

जहां तक मैं देख सकता हूं, यह इंटरनेट एक्सप्लोरर (8-10 परीक्षण किया गया) में काम नहीं करता है। किसी भी विचार कैसे IE से निपटने के लिए?

— लीनस कैल्डवेल

मुझे एक समाधान मिला है जो IE8-11 में भी काम कर रहा है: stackoverflow.com/a/21902566/1607968

— LeJared

52

IE8-11 में एक बग है , इसलिए display:inline-block;अकेले उपयोग करने से वहां काम नहीं होगा।

मैंने इस बग के लिए एक समाधान खोजा है, स्पष्ट रूप से सेटिंग text-decoration:underline;के लिए: पहले-सामग्री और फिर इस नियम को फिर से लिखनाtext-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

यहाँ काम कर उदाहरण: http://jsfiddle.net/95C2M/

अपडेट: चूंकि jsfiddle IE8 के साथ अब काम नहीं करता है, बस इस सरल डेमो-कोड को स्थानीय HTML फ़ाइल में पेस्ट करें और IE8 में खोलें:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

— LeJared
स्रोत

अगर कोई केस होता था तो IE8 हाइपरलिंक की गई छवि को रेखांकित करता था जिसे केवल <img style="text-decoration:underline">अंदर से बंद किया जा सकता था (और यहाँ कुंजी थी)<a style="padding:0; border:none;">

— बॉब स्टीन

दुर्भाग्य से कि jsfiddle IE8 में सत्यापित नहीं किया जा सकता है क्योंकि jsfiddle IE8 में काम नहीं करता है।

— user2867288

दुर्भाग्य से मुझे कोई भी ऑनलाइन कोड शेयरिंग टूल नहीं मिला जो अभी भी IE8 के साथ काम करता हो। मैंने ऊपर दिए गए उत्तर के लिए एक कोड जोड़ा है जिसे आप केवल एक html फ़ाइल में पेस्ट कर सकते हैं और इसे IE8 में स्थानीय रूप से खोल सकते हैं।

— लेजेरेड

IE9 पर परीक्षण और अनुमोदित, दो अलग-अलग राज्यों के बिना घटना।

— सेराफिन

में एक आइकन के साथ एक लिंक था: इससे पहले कि आराम करने की स्थिति में रेखांकित नहीं होना चाहिए था, फिर होवर पर रेखांकित किया जाना चाहिए, लेकिन आइकन पर नहीं। यहाँ मुझे यह अधिकार प्राप्त करने के लिए आईई को समझाने के लिए क्या करना है: एक {टेक्स्ट-डेकोरेशन: कोई नहीं}: एक से पहले {टेक्स्ट-डेकोरेशन: अंडरलाइन} a: इससे पहले {टेक्स्ट-डेकोरेशन: कोई नहीं} (हाँ वास्तव में, पहले रेखांकित करें,) फिर किसी के साथ ओवरराइट करें): a: hover {text-decration: underline} a: hover: इससे पहले {टेक्स्ट-डेकोरेशन: कोई नहीं}

— फेक हक

7

आप इसे निम्नलिखित :beforeतत्व में जोड़ सकते हैं :

display: inline-block;
white-space: pre-wrap;

साथ display: inline-blockरेखांकन हट जाता है। लेकिन फिर समस्या यह है कि त्रिकोण के बाद की जगह ढह जाती है और नहीं दिखाई जाती है। इसे ठीक करने के लिए, आप उपयोग कर सकते हैं white-space: pre-wrapया white-space: pre।

डेमो : http://jsfiddle.net/r42e5/9/

— Oriol
स्रोत

1

pre-wrapसंकेत के लिए +1 । मैं content:'►\a0'(\ a0 = & nbsp;) का उपयोग कर रहा था

— Hashbrown

1

अपने लिंक को स्पैन में लपेटें और टेक्स्ट-डेकोर को स्पैन पर जोड़ें: हॉवर इस तरह से,

a:hover span {
   text-decoration:underline;
}

मैंने आपकी फ़ाइडल को अपडेट किया है जो मुझे लगता है कि आप करने की कोशिश कर रहे हैं। http://jsfiddle.net/r42e5/4/

— udders
स्रोत

अच्छा विचार। ऐसा मैंने पहले भी किया था। समस्या यह है कि यह लिंक एक सेमी-सिस्टम में निर्मित है और हमारे ग्राहक इसे रिच-टेक्स्ट के रूप में भर रहे हैं।

— ऑप्टिमस क्राइम

CMS किस भाषा में है? क्या इसे लिंक से बाहर निकालने और फिर इसे ब्राउज़र में भेजने से पहले एक स्पैन में लपेट सकते हैं?

— उदंड

कंपनी मॉडेक्स का इस्तेमाल कर रही है। मुझे लगता है कि मैं ऐसा कर सकता था कि आखिरी रास्ता था, लेकिन मैं वास्तव में इसे शून्य करना चाहता था। लगता है कि यह संभव नहीं है। फिर भी धन्यवाद।

— ऑप्टिमसक्राइम

-1

इसके बजाय प्रयोग करके देखें:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

कर लेंगे?

— Elen
स्रोत

मेरे div में पैराग्राफ हो सकते हैं, इसलिए यह काम नहीं करेगा। अच्छा विचार थो।

— ऑप्टिमस क्राइम

दिलचस्प है जो -1 डालते हैं यदि स्वीकृत उत्तर समान लेकिन अलग रूप में सुझाव देता है ...

— एलेन

-4

इसे इस्तेमाल करो

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

— बिपिन चंद्र त्रिपाठी
स्रोत

कुछ नहीं करता। पाठ-सजावट को अनदेखा किया जाता है।

— ऑप्टिमसक्राइम