Div z zawartością CSS, po pseudo element nie jest widoczny

Question

Mam POC, który muszę wypełnić i mogę tylko używać CSS do aktualizacji stylów produktu. Zastąpiłem jeden z obrazów produktu logo za pomocą atrybutu treści CSS.

Muszę dodać prosty ciąg z numerem telefonu, który będzie wyświetlany po tym logo. Próbowałem użyć pseudoelementu :after, aby to zrobić. Działa to tylko wtedy, gdy zawartość div jest pusta (logo jest usuwane).

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

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

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

Próbowałem zmieniając display do inline-block i ciężko kodowania height i width dla obu zasad. Zasadniczo wszystko, co mogłem znaleźć. Każda pomoc będzie bardzo ceniona.

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

Answer 1

Właściwość content zastępuje całą zawartość w elemencie. Po dodaniu content do selektora niebędącego pseudo, zawartość ta zastąpi pseudo selektor ::before i.

Spróbuj więc wykonać to za pomocą właściwości content tylko w pseudo selektorach i ::after.

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

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

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

Answer 2

Można zastąpić tła z CSS i umieścić go jako obraz w formacie HTML:

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

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

Albo nawet to zrobić:

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

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

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

Istnieją dwa różne wyniki.

Answer 3

mam pomieszane dookoła z JSFiddle trochę i okazało się, że jedynym realnym sposobem dokonywania wyświetlanie numeru telefonu poniżej obecnego div jest stworzenie innego Gr:

<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> 

Answer 4

Niektóre przeglądarki stosują właściwość content do rzeczywistych elementów, mimo że not being supported in CSS2. css-content-3 ma na to pozwolić, ale dopóki specyfikacja poziomu 3 nie stanie się standardem, co realistycznie nie będzie miało miejsca przez kolejne kilka lat (zwłaszcza biorąc pod uwagę, że nie miało to miejsca w ostatnich latach), stosując content do rzeczywistych elementów należy uznać za niestandardowe zachowanie.

Gdy wartość właściwości content jest obrazem, that image is inserted as replaced content. A gdy zostanie zastosowany do rzeczywistego elementu, zapobiega to pseudoelementom elementu.Dlatego Twój pseudoelement ::after nie pojawia się.

Wszystko, co musisz zrobić, to zastosować obraz do pseudoelementu elementu, a nie do samego elementu.