Insérez un espace à la position dans la ligne de bordure

Question

Je suis en train d'afficher une ligne horizontale en utilisant du CSS :

.horizontalLineBottom {
    border-bottom:solid #6E6A6B;
    border-width:1px;
}

Est-ce que je peux insérer un espace à une position spécifique sur cette ligne ?

Donc

______________________________________________

devient

______________________________             ___

Answer 1

Une autre solution en utilisant border-width:

.line {
    width: 20px;
    height: 1px;
    padding: 0;
    border-width: 0 100px 0 150px;
    border-style: solid;
    border-color: red;
}

http://jsfiddle.net/dfsq/Uttxy/1/

Answer 2

:after ou :before classe pseudo peuvent vous aider. Comme dans ce Fiddle:

div {
    width:100px;
    height:100px;
    border:1px solid #000;
    margin:50px;
    background:yellow;
    position:relative;
}
div:after {
    content: '';
    height:60px;
    width:1px;
    position:absolute;
    top:20px;
    left:-1px;
    background:yellow;
}

Answer 3

Vous ne pouvez pas le faire directement, mais avec une petite astuce en utilisant un pseudo-élément. L'astuce consiste à créer un petit overlay avec la même couleur de fond que le fond sous votre élément.

.verticalLineBottom { 
  position: relative; 
  border-bottom: 1px solid #6E6A6B; 
}
.verticalLineBottom:after { 
  content: ""; 
  position: absolute; 
  right: 20px; 
  bottom: -1px; 
  width: 100px; 
  height: 1px; 
  background: #fff;
}

Exemple: http://jsfiddle.net/zxdS7/

Malheureusement, cela ne fonctionne pas si le fond derrière votre élément a un motif.

Answer 4

J'ai créé ce code pour vous, cela simule le résultat que vous recherchez.

.stopped-line {
  /* styles de base ici */

  width: 100px; /* c'est obligatoire */
  position: relative;
}
.stopped-line:before {
  position: absolute;
  bottom: 0;
  display: block;
  width: 70%; /* largeur en pourcentage de la ligne */
  content: " ";
  height: 1px; /* épaisseur de la ligne */
  background: #000; /* couleur de la ligne */
}
.stopped-line:after {
  position: absolute;
  bottom: 0;
  left: 80%; /* Où la deuxième ligne doit-elle commencer ? */
  display: block;
  width: 20%; /* largeur en pourcentage de la ligne */
  content: " ";
  height: 1px; /* épaisseur de la ligne */
  background: #000; /* couleur de la ligne */
}

JSBin: cliquez

Answer 5

Pas de bordure dans un bloc (juste une bordure pour un bloc).

Vous pouvez ajouter une image de fond, si elle répond à vos besoins.