¿Longitud del borde menor que el ancho de div?

Question

He siguiente código

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

DEMO

El ancho div es 200 píxeles por lo border-bottom es también 200 píxeles, pero ¿qué debo hacer si quiero border-bottom única 100px sin cambiar el ancho div?

Answer 1

Puede utilizar pseudoelements. 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 hay necesidad de utilizar el marcado adicional para fines de presentación. : after también es compatible con IE8.

edición:

si necesita un borde alineado a la derecha, solo cambia left: 0 con right: 0

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

Answer 2

No puede tener un borde de diferente tamaño que el propio div.

la solución sería simplemente agregar otro div bajo la posición neath, centrado o absoluto, con el borde de 1pixel deseado y solo 1pixel de altura.

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

Salí de la frontera original en lo que se puede ver el ancho, y tienen dos ejemplos - uno con 100 de ancho, y el otro con 100 ancho centrado. Elimina el que no deseas usar.

Answer 3

El borde se le da todo el elemento html. Si quieres el borde inferior medio, puedes 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; 
    } 

Answer 4

Otra manera de hacer esto (en los navegadores modernos) es con una sombra de cuadro de propagación negativa. Echa un vistazo a este violín actualización: http://jsfiddle.net/WuZat/290/

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

Creo que la forma más segura y más compatible es la respuesta aceptada anteriormente, sin embargo. Solo pensé en compartir otra técnica.

Answer 5

Se puede utilizar un gradiente 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); 
 
\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

añadí línea bajo bajo la etiqueta h3 como esto

<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

Esto ayudará a:

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

<hr width="50%"> 

Esto crea una línea horizontal con una anchura de 50%, lo que se necesita para crear/modificar la clase si desea editar el estilo.

Answer 9

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: después del elemento psuedo para la segunda línea cambiar las propiedades de este modo: 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

acabo logra lo opuesto a esto usando :after y ::after porque necesitaba hacer mi borde inferior exactamente 1.3rem más amplia:

mi elemento tiene super deformado cuando uso d :before y :after al mismo tiempo porque los elementos están alineados horizontalmente con display: flex, flex-direction: row y align-items: center.

usted podría utilizar esto para hacer algo más ancho o más estrecho, o probablemente grandes modificaciones dimensión matemáticos:

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 sentimos, esto es SCSS, simplemente multiplicar los números por 10 y cambiar las variables con unos valores normales.