Gegeben sei folgendes Markup:

Testcase

Die Aufgabe:
Per CSS soll ein kleines Lupensymbol bereitgestellt werden und über dem IMG in der rechten unteren Ecke des IMG dargestellt werden.

Ein Weg via "background-image" scheidet wohl für eine Darstellung im Vordergrund aus. Ich habe ein wenig mit "z-index" gespielt, aber ohne Erfolg.

Der Weg via generated content klappte auch nicht.
FF44 zeigt es hinter dem Bild an. Chrome48 zeigt nur die Lupe an und das Bild gar nicht.

Dann habe ich noch herumgestochert mit Versuchen das Symbol nicht dem IMG als generated content zuzuweisen, sondern A. Aber da scheitere ich am Positionieren.

Fällt Euch was Gutes ein?

Danke.

__________________

Dann hast du es falsch gemacht, weil so kann man das problemlos einbinden. Wieso wird die Lupe eigentlich als zusätzliches Bild und nicht als Schriftart eingebunden?

Weil?

Du kannst die Lupe doch ganz einfach absolut positionieren. Ob du dafür ein zusätzliches Element, wie z.B. span, nimmst oder ::before oder ::after verwendest ist ja egal, es klappt mit beidem.

Da ich gerne auf unnötiges Markup verzichte würde ich es also mit ::before / after machen. Ähnlich wie in deinem dritten Beispiel, das bei mir übrigens im FF UND Chrome funktioniert. Allerdings sollte die Lupe absolute statt relative positioniert werden und das <a> dafür position: relative, damit die Lupe keine nachfolgenden Elemente beeinflussen kann. Dann am besten dem <a> noch display-block geben, damit es die Maße vom Bild hat und die Lupe korrekt positionieren, z.B. mit bottom:0 und right: 0.

Mittlerweile habe ich das Testcase verändert.
Variante drei geht offenbar.

Aus Neugier:
Wie kann man bitte in dem genannten Testcase das Ganze via background-image lösen?

Zum Einbinden des Bildes als Schriftart:
Was passiert, wenn ein Nutzer in seinem Browser vorgibt "immer eigene Schriftart verwenden"?

Ich habe mich mit den Nachteilen dieses Hacks noch nicht tiefer beschäftigt.

__________________

Wenn du die Lupe mit background-image realisieren willst und wir mal vom dritten Beispiel ausgehen, dann etwa so:

content: "";
display: block;
height: 24px;
width: 24px;
background: url("lupe.png");

Damit das mit Hintergrund funktioniert müsstest du dein Markup dahingehend umändern, dass du keinen img-Tag mehr verwendest. Wenn dieser relevant ist, dann geht das natürlich nicht Du kannst dann dem a-Tag einfach zwei Hintergrundbilder zuweisen.

Die Sinnhaftigkeit, bzw. semantische korrektheit wird hier aber nicht berücksichtigt.

Genau das was man erwarten könnte:
vorher.png
vorher

nachher.png
nachher

@clone
Zur Hack "Einbinden als Schrift":
Den Effekt finde ich inakzeptabel. Er stört mich selber als Nutzer massiv.

__________________

Natürlich, die Einbindung von Schriften hat nicht nur Vorteile. Was ist aber, wenn der Benutzer im Browser angibt "Zeig keine Bilder an." Oder "Führe kein Javascript aus." Dann passiert das Selbe (nur anders ) und da machen sich die Leute keine Sorgen darüber.

Aber ja, wenn keine älteren IE mehr unterstützt werden müssen, dann ist SVG zu empfehlen. Was sich bei deinem Lupen-Icon zB auch sehr anbieten würde

Wie Du vermeide ich zusätzliches Markup.
Deinen Vorschlag habe ich in's Testcase hochgeladen.

Noch funktioniert es nicht.

Ich hatte gestern schon mit "position: absolute" und Positionierungen gespielt, die Verhaltensweisen jedoch nicht wirklich durchdrungen.

__________________