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

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>

Il n'est pas nécessaire d'utiliser des balises supplémentaires à des fins de présentation. :after est également pris en charge par IE8.

éditer :

si vous avez besoin d'une bordure alignée à droite, il suffit de modifier left: 0 con right: 0

si vous avez besoin d'une bordure alignée sur le centre, il suffit de mettre left: 50px;

Answer 2

Une autre façon de procéder (dans les navigateurs modernes) consiste à utiliser une ombre portée négative. Consultez cette mise à 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. J'ai juste pensé que je pourrais partager une autre technique.

Answer 3

J'ai ajouté une ligne sous la balise h3 comme ceci

<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 4

Vous pouvez utiliser un gradient 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>

Answer 5

Vous ne pouvez pas avoir une bordure de taille différente de celle de la division elle-même.

la solution consisterait à ajouter une autre div sous neath, centrée ou positionnée en absolu, avec la bordure souhaitée de 1pixel et seulement 1pixel en hauteur.

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

J'ai laissé la bordure originale 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.