einfügen Raum an Position in Grenzlinie

Question

ich die Anzeige eine horizontale Linie mit CSS:

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

Kann ich Raum eine bestimmte Position auf dieser Linie insterted werden?

wird also

______________________________________________ 

______________________________    ___ 

Answer 1

Eine andere Lösung mit 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

Nein mit Grenze in einem Block (nur eine Grenze für einen Block).

Sie können ein Hintergrundbild hinzufügen, wenn es Ihren Anforderungen entspricht.

Answer 3

:after oder :before psuedo Klasse kann Ihnen helfen. Wie in dieser 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 4

können Sie dies direkt über CSS nicht erreichen. Ich würde vorschlagen, 2 Lösungen 1) Sie können _ Zeichen verwenden und es wie eine Zeile aussehen und Platz einfügen, wo immer Sie wollen und geben Sie Farbe Attribut über CSS. 2) Verwenden Sie zwei Elemente, wobei das erste Element eine gewisse Breite und einige Rand rechts aufweist. Die Marge Recht geben Ihnen den erforderlichen Raum

Answer 5

Sie einen background Gradienten auf dem Element verwenden: http://jsfiddle.net/q652t/ Dann könnte man so viele erstellen, wie Sie möchten

.line { 
    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%); 
} 

Answer 6

Sie es nicht direkt tun, aber mit einer kleinen Umgehung mit einem Pseudo-Element. Der Trick besteht darin, eine kleine Überlagerung mit der gleichen Hintergrundfarbe wie der Hintergrund unter Ihrem Element zu erstellen.

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

Beispiel: http://jsfiddle.net/zxdS7/

Leider ist es nicht funktioniert, wenn der Hintergrund hinter dem Element ein Muster aufweist.

Answer 7

Ich habe diesen Code für Sie erstellt, dies fake das Ergebnis, das Sie suchen.

.stopped-line { 
    /* basic styles here */ 

    width: 100px; /* this is mandatory */ 
    position: relative; 
} 
.stopped-line:before { 
    position: absolute; 
    bottom: 0; 
    display: block; 
    width: 70%; /* width in percentage of the line */ 
    content: " "; 
    height: 1px; /* thickness of the line */ 
    background: #000; /* color of the line */ 
} 
.stopped-line:after { 
    position: absolute; 
    bottom: 0; 
    left: 80%; /* Where should the second line start? */ 
    display: block; 
    width: 20%; /* width in percentage of the line */ 
    content: " "; 
    height: 1px; /* thickness of the line */ 
    background: #000; /* color of the line */ 
} 

JSBin: click