He siguientes del código de

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

DEMO

El div ancho de 200px así frontera-parte inferior es también 200px pero ¿qué debo hacer si quiero frontera-parte inferior sólo 100px sin cambiar div ancho?

InformationsquelleAutor Ali Nouman | 2011-12-20

10 Comentarios

  1. 207

    Puede utilizar pseudoelements. E. g.

    CSS:

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

    HTML:

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

    Sin necesidad de utilizar el extra de marcado para la presentación propósito. :después de que también es apoyado desde IE8.

    edición:

    si usted necesita un alineado a la derecha de la frontera, acaba de cambiar left: 0 con right: 0

    si usted necesita un centro alineado a la frontera simplemente establezca left: 50px;

    • Este fue mi técnica demasiado, pero se nota que se la dará a la frontera en la mitad izquierda de la div. Si usted lo desea, centrada en dar la div:before left: 50px.
    • La pregunta no especifica en qué posición de la frontera debe aparecer por lo que no han considerado otras posiciones
    • si la anchura de la parte inferior de la frontera es de 50% y desea que se centra, el estilo debe ser left: 25% ya que será de un 25% + 50% + 25%
    • en este ejemplo 50px; está bien. el div es de 200px de ancho. 50px = 25%
    • Sí soy consciente de que en este ejemplo funciona. Pero para los demás haciendo algo similar que podría tratando de ser lo que es sensible, puede que necesite utilizar % como fue el caso necesitaba la respuesta.
    • El centro de la frontera de la mejor manera para mí es establecer right: 0 en div:before. @fcalderan, sueles usar que la sangría en el código CSS?
    • para la dinámica de la longitud de div en lugar de 200px, usted puede usar margin:auto junto con izquierda:0 y a la derecha:0 pseudo :después de
    • Esta técnica ha funcionado bien para mí. Yo quería un margen comunes en ambos lados, así que lo hice a la izquierda: 15%; a la derecha: el 15% y no el ancho o la altura en todo y funcionó muy bien.
    • Uso margin: auto, right: 0, left: 0 en el :before el centro de la línea. Upvote si esto te ayudó.

  2. 37

    Otra manera de hacer esto (en los navegadores modernos) es con una diferencia negativa box-shadow. Echa un vistazo a este actualizado violín: http://jsfiddle.net/WuZat/290/

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

    Creo que la forma más segura y compatible manera es el aceptado respuesta anterior, aunque. Solo que pensé que me gustaría compartir otra técnica.

    • Solución impresionante, gracias mucho!!
  3. 9

    Puede utilizar un gradiente lineal:

    CSS:

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

    HTML:

    <div></div>

  4. 6

    He añadido la línea del bajo h3 etiqueta 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;
    }
  5. 3

    Usted no puede tener un tamaño diferente de la frontera de la div sí mismo.

    la solución sería añadir otro div en neath, centrada o absoluta posicionado, con la deseada 1pixel frontera y sólo 1pixel en altura.

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

    Salí de la frontera original para que usted pueda ver el ancho, y tienen dos ejemplos, uno con 100 de ancho, y el otro con 100 de ancho en el centro. Eliminar la que usted no desea utilizar.

  6. 2

    Tarde a la fiesta, pero para cualquier persona que quiera hacer 2 de las fronteras (en la parte inferior y a la derecha en mi caso) se puede utilizar la técnica en respuesta y agregar un :después de pseudo-elemento de la segunda línea a continuación, sólo cambiar las propiedades como:
    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;
    }
  7. 1

    La frontera es dado a todo el elemento html. Si desea que la mitad del borde inferior, se puede envolver con algunos otros de identificación de bloque 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;   
        } 
  8. 1
                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;
                }
  9. 1

    Yo sólo logra lo opuesto a esto el uso de :after y ::after porque me necesitaba para hacer mi borde inferior exactamente 1.3rem más amplio:

    Mi elemento puse super deformado cuando he usado :before y :after, al mismo tiempo, debido a que 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, cualquier matemático dimensión 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;
    }

    Lo siento, esta es SCSS, sólo se debe multiplicar el número por 10 y el cambio de las variables con algunos de los valores normales.

Dejar respuesta

Please enter your comment!
Please enter your name here