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

J'ai le code suivant

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

DEMO

La largeur div est de 200px, donc border-bottom est également de 200px mais que dois-je faire si je veux seulement 100px border-bottom sans changer la largeur de div?

Vous pouvez utiliser des pseudo-éléments. Par exemple

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>

Pas besoin d'utiliser un balisage supplémentaire à des fins de présentation. : after est également pris en charge à partir d'IE8.

Éditer:

si vous avez besoin d'une bordure alignée à droite, changez simplement left: 0avecright: 0

si vous avez besoin d'une bordure centrée, définissez simplement left: 50px;

Une autre façon de faire cela (dans les navigateurs modernes) consiste à utiliser une ombre de boîte de propagation négative. Découvrez ce violon mis à jour: http://jsfiddle.net/WuZat/290/

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

Je pense que le moyen le plus sûr et le plus compatible est la réponse acceptée ci-dessus, cependant. Je pensais juste que je partagerais une autre technique.

Vous pouvez utiliser un dégradé linéaire:

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>

J'ai ajouté une ligne sous la balise h3 comme celle-ci

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

Vous ne pouvez pas avoir une bordure de taille différente de celle du div lui-même.

la solution serait d'ajouter simplement un autre div sous neath, centré ou positionné en absolu, avec la bordure de 1 pixel souhaitée et seulement 1 pixel de hauteur.

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

J'ai laissé la bordure d'origine pour que vous puissiez voir la largeur, et j'ai deux exemples - l'un avec une largeur de 100 et l'autre avec une largeur de 100 centrée. Supprimez celui que vous ne souhaitez pas utiliser.

En retard à la fête, mais pour tous ceux qui veulent créer 2 bordures (en bas et à droite dans mon cas), vous pouvez utiliser la technique dans la réponse acceptée et ajouter un: après psuedo-element pour la deuxième ligne, puis changez simplement les propriétés comme donc: 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;
}

J'ai un cas pour avoir une bordure inférieure entre les images dans le conteneur div et le meilleur code d'une ligne était - 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;
}

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

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

La bordure reçoit tout l'élément html. Si vous voulez la moitié de la bordure inférieure, vous pouvez l'envelopper avec 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;   
    } 

CA aidera:

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

<hr width="50%">

Cela crée une ligne horizontale d'une largeur de 50%, vous devrez créer / modifier la classe si vous souhaitez modifier le style.

J'ai juste accompli le contraire de cela en utilisant :afteret ::afterparce que j'avais besoin de faire exactement ma bordure inférieure1.3rem élargir :

Mon élément s'est super déformé lorsque je l'ai utilisé :beforeet :afteren même temps parce que les éléments sont alignés horizontalement avec display: flex, flex-direction: rowetalign-items: center .

Vous pouvez l'utiliser pour créer quelque chose de plus large ou plus étroit, ou probablement n'importe quel mod de dimension mathématique:

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

Désolé, il SCSSsuffit de multiplier les nombres par 10 et de changer les variables avec des valeurs normales.