Quoi qu'il en soit, limiter la longueur de la frontière?

Question

Est-il possible de limiter la longueur d'une frontière? J'ai une DIV qui a une bordure inférieure, mais je veux ajouter une bordure à gauche de la DIV qui ne s'étend que sur une moitié de la hauteur. Est-il possible de le faire sans ajouter des éléments supplémentaires sur la page?

Answer 1

Le contenu généré par CSS peut résoudre ce problème pour vous:

 div {
  position: relative;
} 
/* Main div for border to extend to 50% from bottom left corner */
div:after {
  content:""; 
  background: black; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 50%; 
  width: 1px;
}
 

Answer 2

J'espère que cela t'aides:

 #mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
} 

 <div id="mainDiv">
  <div id="borderLeft"></div>
</div> 

Answer 3

Le :after roches :)

Si vous jouez un peu, vous pouvez même définir l’élément de bordure redimensionné pour qu’il apparaisse centré ou pour qu’il apparaisse uniquement s’il ya un autre élément à côté (comme dans les menus). Voici un exemple avec un menu:

 #menu > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li:after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}
 

Answer 4

pour les lignes horizontales, vous pouvez utiliser la balise hr:

 hr { width: 90%; }
 

mais il n'est pas possible de limiter la hauteur de la frontière. seulement hauteur d'élément.

Answer 5

Les frontières sont définies par côté uniquement, pas par fractions de côté. Donc, non, vous ne pouvez pas faire ça.

En outre, un nouvel élément ne serait pas non plus une frontière, il ne ferait que simuler le comportement souhaité - mais ce serait tout de même un élément.