Kenar uzunluğu div genişliğinden daha küçük mü?

Aşağıdaki kodum var

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

DEMO

Div genişliği 200 piksel, dolayısıyla border-bottom da 200px'dir, ancak div genişliğini değiştirmeden sadece 100px border-bottom istiyorsam ne yapmalıyım?

Sahte elemanlar kullanabilirsiniz. Örneğin

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>

Sunum amaçlı ekstra işaretleme kullanmaya gerek yok. : after, IE8 tarafından da desteklenir.

Düzenle:

Bir sağa hizalanmış sınırını gerekiyorsa, sadece değiştirmek left: 0ileright: 0

merkeze hizalanmış bir sınıra ihtiyacınız varsa, left: 50px;

Bunu yapmanın başka bir yolu (modern tarayıcılarda) negatif bir yayılma kutusu gölgesi kullanmaktır. Bu güncellenmiş kemana bir göz atın: http://jsfiddle.net/WuZat/290/

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

Bence en güvenli ve en uyumlu yol yukarıda kabul edilen cevaptır. Başka bir tekniği paylaşacağımı düşündüm.

Doğrusal bir gradyan kullanabilirsiniz:

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);
	background-position: bottom;
	background-size: 100% 25px;
	background-repeat: no-repeat;
    border-bottom: 1px solid #000;
    border-top: 1px solid red;
}

<div></div>

H3 etiketinin altına şöyle bir çizgi ekledim

<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;
}

Div'in kendisinden farklı boyutta bir kenarlığa sahip olamazsınız.

çözüm, istenen 1 piksel kenarlık ve yalnızca 1 piksel yüksekliğinde altta, ortalanmış veya mutlak konumlandırılmış başka bir div eklemektir.

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

Genişliği görebilmeniz için orijinal sınırı bıraktım ve biri 100 genişliğinde ve diğeri 100 genişlikte ortalanmış olmak üzere iki örneğiniz var. Kullanmak istemediğinizi silin.

Partiye geç ancak 2 sınır yapmak isteyenler için (benim durumumda altta ve sağda) tekniği kabul edilen cevapta kullanabilir ve ikinci satır için bir: psuedo-öğesi ekleyebilir ve ardından özellikleri değiştirebilirsiniz. yani: 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;
}

Div kapsayıcısındaki resimler arasında bir miktar alt kenarlığa sahip olmam gerekiyor ve en iyi tek satırlı kod - border-bottom-style: inset;

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;
}

Projemde buna benzer bir şey yaptım. Burada paylaşmak isterim. Alt öğe olarak başka bir div ekleyebilir ve ona küçük genişlikte bir kenarlık verebilir ve normal CSS ile sola, ortaya veya sağa yerleştirebilirsiniz.

HTML Kodu:

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

Aşağıdaki gibi CSS:

   .active {
    color: magneta;
  }
   .active .ac-brdr {
        width: 20px;
        margin: 0 auto;
        border-bottom: 1px solid magneta;
  }

Kenarlığa tüm html öğesi verilir. Yarım alt kenarlık istiyorsanız, onu span gibi başka bir tanımlanabilir blokla sarabilirsiniz.

HTML Kodu:

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

Aşağıdaki gibi CSS:

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

Bu yardımcı olacak:

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

<hr width="50%">

Bu,% 50 genişliğinde yatay bir çizgi oluşturur, stili düzenlemek istiyorsanız sınıfı oluşturmanız / değiştirmeniz gerekir.

Sadece bunun tersini başardım :afterve ::afteralt sınırımı tam olarak yapmam gerektiğinden1.3rem genişletmem gerektiğinden:

Benim eleman ben kullanıldığında süper deforme var :beforeve :afteraynı zamanda elemanları yatay hizalanmış olduğundan display: flex, flex-direction: rowve align-items: center.

Bunu daha geniş veya daha dar bir şey veya muhtemelen herhangi bir matematiksel boyut modu yapmak için kullanabilirsiniz:

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;
}

Üzgünüm, bu SCSSsadece sayıları 10 ile çarpın ve değişkenleri bazı normal değerlerle değiştirin.