Matthias Apsel: Text und Bild in einer Zeile - Verhalten bei Zeilenumbruch

Beitrag lesen

Om nah hoo pez nyeetz, Matthias Apsel!

Allerdings kann dann das Pseudoelement im Chrome wieder allein in einer Zeile stehen.

Das war der Fall, weil das p-Element mit einem Leerzeichen endete. Damit heißt die Lösung für alle relevanten Windows-Browser: kein Leerzeichen am Ende und

p {  
        position: relative;  
        padding-right: 30px;  
}  
p::after {  
        content: "";  
        position: absolute;  
	display: inline-block;  
        margin-left: 5px;  
        width: 30px;  
        height: 30px;  
        background: url();  
}

oder nach Belieben auch mit echtem Bild ohne Leerzeichen vor dem Bild

p {  
        position: relative;  
        padding-right: [Bildbreite];  
}  
img {  
        position: absolute;  
	display: inline-block;  
        margin-left: 5px;  
}

Matthias

--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rum und Rumpelstilzchen.