¿Longitud del borde menor que el ancho div?

Tengo el siguiente código

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

MANIFESTACIÓN

El ancho del div es 200px, por lo que el borde inferior también es 200px, pero ¿qué debo hacer si quiero que el borde inferior solo sea 100px sin cambiar el ancho del div?

Puedes usar pseudoelementos. P.ej

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>

No es necesario utilizar marcas adicionales para fines de presentación. : after también es compatible con IE8.

editar:

si necesita un borde alineado a la derecha, cambie left: 0conright: 0

si necesita un borde alineado al centro, simplemente configure left: 50px;

Otra forma de hacer esto (en los navegadores modernos) es con una sombra de cuadro de extensión negativa. Mira este violín actualizado: http://jsfiddle.net/WuZat/290/

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

Sin embargo, creo que la forma más segura y compatible es la respuesta aceptada anterior. Solo pensé en compartir otra técnica.

Puede utilizar un degradado lineal:

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>

Agregué una línea debajo de la etiqueta h3 como esta

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

No puede tener un borde de tamaño diferente al div en sí.

la solución sería simplemente agregar otro div debajo, centrado o en posición absoluta, con el borde deseado de 1 píxel y solo 1 píxel de altura.

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

Dejé el borde original para que pueda ver el ancho y tenga dos ejemplos, uno con 100 de ancho y el otro con 100 de ancho centrado. Elimine el que no desea utilizar.

Tarde para la fiesta, pero para cualquiera que quiera hacer 2 bordes (en la parte inferior y derecha en mi caso) puede usar la técnica en la respuesta aceptada y agregar un elemento: después de psuedo para la segunda línea, luego simplemente cambie las propiedades como entonces: 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;
}

Tengo el caso de tener un borde inferior entre las imágenes en el contenedor div y el mejor código de una línea fue - 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;
}

Hice algo como esto en mi proyecto. Me gustaría compartirlo aquí. Puede agregar otro div como hijo y darle un borde con un ancho pequeño y colocarlo a la izquierda, al centro o a la derecha con CSS habitual

Código HTML:

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

CSS de la siguiente manera:

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

Al borde se le da todo el elemento html. Si desea la mitad del borde inferior, puede envolverlo con algún otro bloque identificable como span.

Código HTML:

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

CSS de la siguiente manera:

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

Esto ayudará:

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

<hr width="50%">

Esto crea una línea horizontal con un ancho del 50%, necesitaría crear / modificar la clase si desea editar el estilo.

Simplemente logré lo contrario de esto usando :aftery ::afterporque necesitaba hacer mi borde inferior exactamente 1.3remmás ancho:

Mi elemento consiguió deforma súper cuando utilicé :beforey :afteral mismo tiempo porque los elementos están alineadas horizontalmente con display: flex, flex-direction: rowy align-items: center.

Puede usar esto para hacer algo más ancho o más estrecho, o probablemente cualquier modificación de dimensión 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;
}

Lo siento, esto es SCSS, simplemente multiplica los números por 10 y cambia las variables con algunos valores normales.