Comprimento da borda menor que largura div?

Eu tenho o seguinte código

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

DEMO

A largura div é 200px, então border-bottom também é 200px, mas o que devo fazer se quiser que o border-bottom apenas 100px sem alterar a largura div?

Você pode usar pseudoelementos. Por exemplo

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>

Não há necessidade de usar marcação extra para fins de apresentação. : after também é compatível com o IE8.

editar:

se você precisa de uma borda alinhada à direita, basta alterar left: 0comright: 0

se você precisa de uma borda alinhada ao centro, basta definir left: 50px;

Outra maneira de fazer isso (em navegadores modernos) é com uma caixa-sombra negativa. Confira este violino atualizado: http://jsfiddle.net/WuZat/290/

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

Porém, acho que a maneira mais segura e compatível é a resposta aceita acima. Só pensei em compartilhar outra técnica.

Você pode usar um gradiente linear:

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>

Eu adicionei uma linha sob a tag h3 assim

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

Você não pode ter uma borda de tamanho diferente da própria div.

a solução seria apenas adicionar outro div embaixo, centralizado ou posicionado de forma absoluta, com a borda de 1 pixel desejada e apenas 1 pixel de altura.

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

Deixei a borda original para que você possa ver a largura e tenha dois exemplos - um com largura 100 e outro com largura 100 centralizado. Exclua aquele que você não deseja usar.

Atrasado para a festa, mas para quem quiser fazer 2 bordas (embaixo e à direita no meu caso), você pode usar a técnica na resposta aceita e adicionar um: after psuedo-element para a segunda linha e então apenas alterar as propriedades como então: 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;
}

Eu tenho o caso de ter alguma borda inferior entre as imagens no contêiner div e o melhor código de uma linha era - estilo border-bottom: 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;
}

Eu fiz algo assim no meu projeto. Eu gostaria de compartilhar isso aqui. Você pode adicionar outro div como filho e dar a ele uma borda com uma largura pequena e colocá-lo à esquerda, centro ou direita com CSS normal

Código HTML:

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

CSS como abaixo:

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

A borda recebe todo o elemento html. Se você quiser metade da borda inferior, pode envolvê-la com algum outro bloco identificável como o span.

Código HTML:

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

CSS como abaixo:

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

Isso vai ajudar:

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

<hr width="50%">

Isso cria uma linha horizontal com largura de 50%, você precisará criar / modificar a classe se quiser editar o estilo.

Acabei de fazer o oposto usando :aftere ::afterporque precisava deixar minha borda inferior exatamente 1.3remmais larga:

Meu elemento ficou super deformado quando usei :beforee :afterao mesmo tempo porque os elementos estão alinhados horizontalmente com display: flex, flex-direction: rowe align-items: center.

Você pode usar isso para fazer algo mais amplo ou mais estreito, ou provavelmente qualquer mods de dimensão matemática:

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

Desculpe, isto é SCSS, basta multiplicar os números por 10 e alterar as variáveis ​​com alguns valores normais.