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

Vous ne pouvez pas réaliser cela directement via CSS. Je vous suggérerais 2 solutions 1) vous pouvez utiliser le caractère _ et le faire ressembler à une ligne et insérer un espace où vous le souhaitez et donner un attribut de couleur via CSS. 2) Utilisez deux éléments, le premier élément ayant une certaine largeur et une certaine marge à droite. La marge à droite vous donnera l'espace requis

Answer 2

Vous pourriez utiliser un dégradé de fond sur l'élément : http://jsfiddle.net/q652t/ Ensuite, vous pourriez en créer autant que vous le souhaitez

.ligne {
    margin: 10px;
    height: 1px;
    width: 400px;
    background:  -webkit-linear-gradient(
        left, gray 10%, white 10%, white 40%, 
        gray 40%, gray 60%, 
        white 60%, white 80%,
        red 80%, red 100%);
}