Div mit CSS-Inhalt, nach dem pseudo-element ist nicht sichtbar

Ich habe eine POC, die ich absolvieren muss und ich darf mit Hilfe von CSS update Stile eines Produkts. Ich ersetzt mit einem Bild von dem Produkt mit einem logo mit dem CSS-Attribut content.

Muss ich hinzufügen, eine einfache Schnur mit einer Telefonnummer angezeigt werden, nachdem dieses logo. Ich habe versucht, verwenden Sie die :after pseudo-element, um dies zu tun. Dies funktioniert nur, wenn der Inhalt der div leer ist (logo entfernt).

CSS:

.demo {
  content: url('http://placehold.it/350x150')
}

.demo:after {
  content: 'test';
  display: inline-block;
}

HTML:

<div class="demo"></div>

Ich habe versucht, die änderung der display zu inline-block und harte Codierung der heightund width für beide Regeln. Im wesentlichen alles, was ich finden konnte. Jegliche Hilfe würde sehr geschätzt werden.

JSFiddle hier: https://jsfiddle.net/qykbjznm/

InformationsquelleAutor ICodeGorilla | 2017-03-07
  1. 13

    Den content - Eigenschaft ersetzt alle Inhalte innerhalb des Elements. Durch hinzufügen content zu einer nicht-pseudo-Selektor ist, wird der Inhalt ersetzen Sie die ::before und ::after pseudo-Selektor.

    Also versuchen, dies zu tun mit der content Eigenschaft innerhalb der ::before und ::after pseudo-Selektoren nur.

    CSS:

    .demo:before {
     content: url('http://placehold.it/350x150')
}

.demo:after {
    content: 'some text';
    display: block;
}

    HTML:

    <div class="demo"></div>

    • Nur das hinzufügen zur Erklärung, content funktioniert nur auf pseudo-Elemente ich.e :before und :after, so mit content für .demo fehl.
    • wenn man sich die JSfiddle zur Verfügung gestellt von OP content angewendet wird, um ein nicht-pseudo-Selektor und rendering als content würde innerhalb ::before/::after was ist die Ursache für das problem er hatte.
    • Alien: Korrektur, es ist nur unterstützt auf ::before und ::after. Einige Browser do anwenden Inhalte auf tatsächliche Elemente, aber es ist als nicht-standard-Verhalten.
    • Mein bad, was ich meinte, war, dass Sie content für pseudo-Elemente, ohne die es nicht machen. War irgendwie FYI. Trotzdem danke... @Jamy danke dir auch für die Klarstellung.
    InformationsquelleAutor Jamy
  2. 4

    Könnte man den hintergrund ersetzen von CSS, und legen Sie es als Bild in die HTML:

    CSS:

    .demo::after {
    content: 'test';
    display: inline-block;
}

    HTML:

    <div class="demo">
  <img src='http://placehold.it/350x150'/>
</div>

    Oder tun dies sogar:

    CSS:

    .demo {
     background: url('http://placehold.it/350x150');
     height:150px;
     width:350px;
}

.demo::after {
    content: 'test';
}

    HTML:

    <div class="demo"></div>

    Gibt es zwei verschiedene Ergebnisse.

    InformationsquelleAutor Albzi
  3. 2

    Einigen Browsern gelten die content - Eigenschaft auf tatsächliche Elemente, obwohl es nicht unterstützt CSS2. css-content-3 wird voraussichtlich um dies zu ermöglichen, aber bis die Stufe-3-Spezifikation zum standard wird, die realistischerweise nicht passieren, für ein paar Jahre (vor allem, wenn man bedenkt es ist nicht passiert in den letzten 14 Jahre), die Anwendung content auf tatsächliche Elemente, die betrachtet werden sollten nicht-standard-Verhalten.

    Wenn der Wert der content Eigenschaft ist ein Bild, das Bild wird eingefügt, als Inhalt ersetzt. Und wenn diese angewendet wird, um eine tatsächliche element, das verhindert, dass das element von ::before und ::after pseudo-Elemente. Das ist, warum Ihr ::after pseudo-element nicht angezeigt.

    Wie erwähnt, alles, was Sie tun müssen ist, wenden Sie das Bild, um das element ::before pseudo-element, nicht das element selbst.

    InformationsquelleAutor BoltClock
  4. 0

    Ich habe Durcheinander herum mit Ihrem JSFiddle ein bisschen und ich fand, dass der einzige wirkliche Weg, um die Telefonnummer anzuzeigen, die unter der aktuellen div-Element, indem ein anderer div:

    <div class="demo"></div>
<div class="demo2"></div>
<style>
  .demo {
    content: url('http://placehold.it/350x150');
    height:150px;
    width:350px;
  }

  .demo2:before {
    content: "test";
  }
</style>
    InformationsquelleAutor Joel Giovinazzo
Schreibe einen Kommentar