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

Cela va aider :

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.

Answer 2

Je viens d'accomplir le contraire en utilisant :after y ::after parce que j'avais besoin de faire mon bord inférieur exactement 1.3rem plus large :

Mon élément a été super déformé quand j'ai utilisé :before y :after en même temps parce que les éléments sont alignés horizontalement sur display: flex , flex-direction: row y align-items: center .

Vous pouvez l'utiliser pour rendre quelque chose plus large ou plus étroit, ou probablement n'importe quelle modalité 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é, c'est SCSS il suffit de multiplier les chiffres par 10 et de changer les variables avec des valeurs normales.