La longueur de la bordure est inférieure à la largeur de la division ?

Question

J'ai le code suivant

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

DEMO

La largeur du div est de 200px, donc le border-bottom est aussi de 200px, mais que dois-je faire si je veux que le border-bottom ne soit que de 100px sans changer la largeur du div ?

Answer 1

J'interviens tardivement, mais si vous souhaitez créer deux bordures (en bas et à droite dans mon cas), vous pouvez utiliser la technique décrite dans la réponse acceptée et ajouter un psuedo-élément :after pour la deuxième ligne, puis modifier les propriétés comme suit : 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 2

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 3

J'ai un cas pour avoir une bordure inférieure entre les images dans le conteneur div et le meilleur code en une ligne était -. border-bottom-style : inset ;

Answer 4

J'ai fait quelque chose comme ça dans mon projet. Je voudrais le partager ici. Vous pouvez ajouter un autre div comme enfant et lui donner une bordure de petite largeur et le placer à gauche, au centre ou à droite avec les CSS habituels.

Code HTML :

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

CSS comme ci-dessous :

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

Answer 5

La bordure est donnée à l'élément html entier. Si vous voulez une demi-frontière inférieure, vous pouvez l'entourer d'un autre bloc identifiable comme span.

Code HTML :

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

CSS comme ci-dessous :

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