सीमा चौड़ाई से छोटी लंबाई सीमा?

Question

मैं कोड निम्नलिखित है

div { 
    width:200px; 
    border-bottom:1px solid magenta; 
    height:50px; 
} 

DEMO

div चौड़ाई 200px है तो सीमा-नीचे भी 200px है, लेकिन मुझे क्या करना चाहिए अगर मैं सीमा-नीचे केवल 100px div चौड़ाई बदले बिना करना चाहते हैं?

Answer 1

आप pseudoelements उपयोग कर सकते हैं। जैसे

div { 
 
    width : 200px; 
 
    height : 50px; 
 
    position: relative; 
 
    z-index : 1; 
 
    background: #eee; 
 
} 
 

 
div:before { 
 
    content : ""; 
 
    position: absolute; 
 
    left : 0; 
 
    bottom : 0; 
 
    height : 1px; 
 
    width : 50%; /* or 100px */ 
 
    border-bottom:1px solid magenta; 
 
}

<div>Item 1</div> 
 
<div>Item 2</div>

प्रस्तुतिकरण उद्देश्य के लिए अतिरिक्त मार्कअप का उपयोग करने की आवश्यकता नहीं है। : आईई 8 से भी समर्थित है।

संपादित करें:

यदि आप एक दाएँ संरेखित सीमा की जरूरत है, बस left: 0right: 0

के साथ बदल अगर आप एक केंद्र गठबंधन सीमा बस left: 50px;

Answer 2

आपके पास div की तुलना में एक अलग आकार की सीमा नहीं हो सकती है।

समाधान वांछित 1 पिक्सेल सीमा और ऊंचाई में केवल 1 पिक्सेल के साथ, एकमात्र, केंद्रित या पूर्ण स्थान के नीचे एक और div जोड़ने के लिए होगा।

http://jsfiddle.net/WuZat/3/

मैं मूल सीमा छोड़ दिया है ताकि आप चौड़ाई देख सकते हैं, और दो उदाहरण है - जो 100 चौड़ाई के साथ एक है, और केंद्रित 100 चौड़ाई के साथ अन्य। उस व्यक्ति को हटाएं जिसे आप उपयोग नहीं करना चाहते हैं।

Answer 3

सीमा को संपूर्ण HTML तत्व दिया गया है। यदि आप आधा नीचे सीमा चाहते हैं, तो आप इसे स्पैन जैसे किसी अन्य पहचान योग्य ब्लॉक से लपेट सकते हैं।

एचटीएमएल कोड: नीचे के रूप में

<div> <span>content here </span></div> 

सीएसएस:

div{ 
    width:200px; 
    height:50px; 
    } 
span{ 
     width:100px; 
     border-bottom:1px solid magenta; 
    } 

Answer 4

एक और तरीका है यह करने के लिए सेट की जरूरत है (आधुनिक ब्राउज़रों में) एक नकारात्मक फैल बॉक्स-छाया के साथ है। हालांकि, http://jsfiddle.net/WuZat/290/

box-shadow: 0px 24px 3px -24px magenta; 

मुझे लगता है कि सबसे सुरक्षित और सबसे संगत तरीका स्वीकार किए जाते हैं जवाब से ऊपर है: इस अद्यतन बेला की जाँच करें। बस सोचा कि मैं एक और तकनीक साझा करूंगा।

Answer 5

आप एक रेखीय ढाल का उपयोग कर सकते हैं:

div { 
 
    width:100px; 
 
    height:50px; 
 
    display:block; 
 
    background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px); 
 
\t background-position: bottom; 
 
\t background-size: 100% 25px; 
 
\t background-repeat: no-repeat; 
 
    border-bottom: 1px solid #000; 
 
    border-top: 1px solid red; 
 
}

<div></div>

Answer 6

मैं इस

<h3 class="home_title">Your title here</h3> 
.home_title{ 
    display:block; 
} 
.home_title:after { 
    display:block; 
    clear:both; 
    content : ""; 
    position: relative; 
    left : 0; 
    bottom : 0; 
    max-width:250px; 
    height : 1px; 
    width : 50%; /* or 100px */ 
    border-bottom:1px solid #e2000f; 
    margin:0 auto; 
    padding:4px 0px; 
} 

Answer 7

  div{ 
       font-size: 25px; 
       line-height: 27px; 
       display:inline-block; 
       width:200px; 
       text-align:center; 
      } 

      div::after { 
       background: #f1991b none repeat scroll 0 0; 
       content: ""; 
       display: block; 
       height: 3px; 
       margin-top: 15px; 
       width: 100px; 
       margin:auto; 
      } 

Answer 8

तरह h3 टैग के तहत के तहत लाइन जोड़ा इस में मदद मिलेगी:

http://www.w3schools.com/tags/att_hr_width.asp

<hr width="50%"> 

यह 50% की चौड़ाई के साथ एक क्षैतिज रेखा बनाता है, आप अगर आप शैली संपादित करना चाहते हैं बनाने/वर्ग को संशोधित करने की आवश्यकता होगी।

Answer 9

पार्टी के लिए देर हो चुकी है लेकिन किसी भी व्यक्ति के लिए जो 2 सीमाएं (मेरे मामले में नीचे और दाईं ओर) बनाना चाहता है, आप स्वीकार किए गए उत्तर में तकनीक का उपयोग कर सकते हैं और एक जोड़ सकते हैं: दूसरी पंक्ति के लिए psuedo-element के बाद इसलिए जैसे गुणों को बदलने:

मेरे तत्व सुपर विकृत हो गया, जब मैं का उपयोग करें: http://jsfiddle.net/oeaL9fsm/

div 
{ 
    width:500px; 
    height:500px; 
    position: relative; 
    z-index : 1; 
} 
div:before { 
    content : ""; 
    position: absolute; 
    left : 25%; 
    bottom : 0; 
    height : 1px; 
    width : 50%; 
    border-bottom:1px solid magenta; 
} 
div:after { 
    content : ""; 
    position: absolute; 
    right : 0; 
    bottom : 25%; 
    height : 50%; 
    width : 1px; 
    border-right:1px solid magenta; 
} 

Answer 10

मैं सिर्फ क्योंकि मैं अपने निचले बॉर्डर बिल्कुल 1.3rem व्यापक बनाने के लिए आवश्यक :after और ::after का उपयोग कर इस के विपरीत पूरा किया डी :before और :after एक ही समय में क्योंकि तत्व display: flex, 10 और align-items: center के साथ क्षैतिज रूप से गठबंधन हैं।

तुम कुछ बड़ा या छोटा, या शायद कर रही किसी भी गणितीय आयाम mods के लिए इस का उपयोग कर सकते हैं:

a.nav_link-active { 
    color: $e1-red; 
    margin-top: 3.7rem; 
} 
a.nav_link-active:visited { 
    color: $e1-red; 
} 
a.nav_link-active:after { 
    content: ''; 
    margin-top: 3.3rem;  // margin and height should 
    height: 0.4rem;   // add up to active link margin 
    background: $e1-red; 
    margin-left: -$nav-spacer-margin; 
    display: block; 
} 
a.nav_link-active::after { 
    content: ''; 
    margin-top: 3.3rem;  // margin and height should 
    height: 0.4rem;   // add up to active link margin 
    background: $e1-red; 
    margin-right: -$nav-spacer-margin; 
    display: block; 
} 

क्षमा करें, यह SCSS है, सिर्फ 10 से संख्याओं को गुणा और कुछ सामान्य मूल्यों के साथ चर बदल जाते हैं।