Stellen Sie CSS-pseudoelement :before gleiche Höhe wie die Haupt-element

Ich habe auf der Suche alle über und konnte eine Lösung finden, um diese auf meinem eigenen. Ich bin versucht, eine grundlegende contenteditable-code-editor, und für die Zeilennummern habe ich gewählt, um ein Absatz für jede Zeile mit Tresen in einem CSS-pseudo-element. Hier das fiddle: http://jsfiddle.net/zppb29jw/

Das problem ist, dass wenn der Absatz ist etwas länger, der rest des Textes gehen unter meinen Zähler pseudoelement. Ich möchte die Strecke :vor der Theke, um die gleiche Höhe wie der Absatz.

Habe ich versucht, mit position:relative auf die Absatz-und position:absolute; height:100% auf die p:before pseudoelement wie hier beschrieben: Wie kann das pseudo-element erkennen Sie die Höhe der nicht-pseudo-element?

Diese funktioniert nicht in meinem Fall, weil ich nicht wollen, dass die p:vor dem element zu gehen über und decken Sie den Absatz, ich will einfach nur das gleiche Verhalten wie jetzt, die wollen nur die p:before element um die Strecke auf der gleichen Höhe wie die Haupt -p.

Ich würde auch nicht wollen, um die Linie Strecke mehr als die Breite des wrapper-container. Ich habe versucht, viele Methoden, aber nicht zu einer Lösung kommen.

Sie sollten zeigen Sie HTML-und CSS-code, wie erforderlich ist, um das Problem reproduzieren, in der Frage selbst.
Ich habe geschrieben ein Turnschuh.... jsfiddle.net/zppb29jw Denke, es ist nur einfacher, auf diese Weise
Ein Turnschuh ist nicht ein Ersatz für den code, nur eine Bequemlichkeit. Eine Frage sollte sein, völlig verständlich, ohne nach links (kann auch kaputt irgendwann).

InformationsquelleAutor just some guy | 2014-10-19

  1. 0

    http://jsfiddle.net/zppb29jw/2/

    p {
    position:relative;
    left: 4em;
    ...

p:before {
    position:absolute;
    right:100%
    display:block;
    ...

    ist das ok für dich?

    InformationsquelleAutor webdev-dan

  2. 0
    .black_right{
    position: relative;
    display: table;
    width: 100%;
    z-index: 10;
}
.black_right::after{
    content: " "; 
    top: 0px;
    height: 100%;
    width: 100%;
    box-shadow: 500px 0px #000;
    position: absolute;
}

    InformationsquelleAutor user3432605

Schreibe einen Kommentar