मैं लिंक के नीचे एक छोटी सी रेखा कैसे जोड़ सकता हूं? रेखा केवल होवर पर दिखाई देनी चाहिए। मैंने सीमा-तल के साथ प्रयास किया, लेकिन इस तरह से लाइन लिंक चौड़ाई का 100% है और मैं चाहता हूं कि लिंक लिंक से कम हो।होवर पर लिंक नीचे दी गई रेखा
यहां प्रभाव की एक उदाहरण छवि है जिसे मैं बनाने का प्रयास करता हूं।
आप ::after छद्म तत्व का उपयोग कोशिश कर सकते हैं:
a {
position: relative;
text-decoration: none;
}
a:hover::after {
content: "";
position: absolute;
left: 25%;
right: 25%;
bottom: 0;
border: 1px solid black;
}<a href='#'>Demo Link</a>ऐसा लगता है कि डेमो काम नहीं कर रहा है। लिंक – user2013488
पर होवर करते समय मुझे कोई रेखा दिखाई नहीं दे रही है क्या आप एक प्राचीन ब्राउज़र का उपयोग कर रहे हैं जो छद्म तत्वों का समर्थन नहीं करता है? –
यह अभी ठीक काम कर रहा है, लेकिन यह अजीब बात है कि सीमा-नीचे कहता है: 1 पीएक्स लेकिन लाइन – user2013488
सीधे शब्दों में इस वर्ग का उपयोग करें:
.link:hover {
background-image:url("YOUR-SMALL-LINE-BOTTOM.png")
}
इस तरह, लाइन दिखाई देगा जब आप तत्व पर होवर करें। और आप छवि में निर्दिष्ट कर सकते हैं, रेखा कितनी छोटी या बड़ी होनी चाहिए।
यह ऐसा कुछ है जिसे मैंने अभी सोचा था, इसे देखें कि आप क्या सोचते हैं। इसलिए हम :after का उपयोग करते हैं और टेक्स्ट के नीचे एक पंक्ति बनाते हैं। यह केवल तभी काम करता है जब माता-पिता की चौड़ाई होती है (केंद्र के लिए)।
HTML:
<div>Test</div>
सीएसएस:
div {
width: 30px;
}
div:hover:after {
content: "";
display: block;
width: 5px;
border-bottom: 1px solid;
margin: 0 auto;
}
अपडेट किया गया सीएसएस:
div {
display: inline-block;
}
सुनिश्चित नहीं हैं कि क्यों मैं इस के बारे में सोच लेकिन नहीं था तुम सिर्फ inline-block का उपयोग यह माता पिता के एक चौड़ाई बिना केंद्र के लिए प्राप्त करने के लिए कर सकते हैं।
यहाँ ही विधि का उपयोग एक लिंक, बस बैठाना आप उलझन में मिल गया है।
तो मैं अब मैं भी तो यहाँ सबसे स्पष्ट बात कहना चाहिए कहा जा है लोगों कि width एक प्रतिशत हो सकता है पता नहीं है के लिए एक अद्यतन है।
width: 70%;
70% करने के लिए 5px से चौड़ाई बदल दिया तो यह पाठ की चौड़ाई के साथ विस्तार होगा।
सीमा के लिए एक और डिव बनाने का प्रयास करें। और अपनी पसंद के अनुसार उस div की चौड़ाई समायोजित करें। मुझे उम्मीद है कि इससे सहायता मिलेगी।
use underline or if u want the line to be much shorter try scalar vector graphics(svg) with this you can have custom lines.
<svg id="line "height="40" width="40">
<line x1="0" y1="0" x2="700" y2="20" style="stroke:rgb(125,0,0);stroke-width:2" />
क्या इस बारे में?
a {text-decoration:none;position:relative;}
a:hover:before {content:"_";position:absolute;bottom:-5px;left:50%;width:10px;margin:0 0 0 -5px;}
जांच करने के लिए इस बेला अधिक: http://jsfiddle.net/h7Xb5/
संपादित करें: सुर्ख समाधान एक ही परिणाम है और उसके आधार पर तो और अधिक सुरुचिपूर्ण है, मैं इसे हाल ही में उपयोग संक्रमण के अलावा, यह एक थोड़ा और अधिक बनाने आंख को पकड़ने और मैंने सोचा कि यह यहाँ साझा करने के लिए उपयोगी होगा:
a {
display: inline-block;
text-decoration:none
}
a:after {
content: "";
display: block;
width: 0;
border-bottom: 1px solid;
margin: 0 auto;
transition:all 0.3s linear 0s;
}
a:hover:after {
width: 90%;
}
(Ori ginal नीचे का जवाब)
Check this मैं सिर्फ के साथ आया था, बेला में खेल: मंडराना:
<a class="bordered" href="#">I am a link, hover to see</a>
a.bordered {
text-decoration:none;
position: relative;
z-index : 1;
display:inline-block;
}
a.bordered:hover:before {
content : "";
position: absolute;
left : 50%;
bottom : 0;
height : 1px;
width : 80%;
border-bottom:1px solid grey;
margin-left:-40%;
}
प्रतिशत के आधार पर आप के साथ a.bordered निभा सकते मार्जिन और बाईं स्थिति से पहले।
हमें दिखाएं कि आपने क्या प्रयास किया है। – George
आप कहां दिखाना चाहते हैं? विशिष्ट अक्षरों के नीचे? –
शीर्षक सीम आसान .... अच्छा यह अप्रत्याशित था। – Viscocent