::After-Pseudoelement mittig zu Element platzieren

[Gunnar Bittersmann]

@@Tobias

Ich habe dort Profilbilder von Menschen, auf die man klicken soll.

Die Bilder stecken in a-Elementen? Ansonsten ist da nichts, worauf man (= alle, auch Tastaturnutzer) clicken können.

Darin ist der content "-> Profil".

Das sieht mir eher nach Inhalt aus, der im HTML stehen sollte, nicht als Verzierung per CSS.

Ich möchte jetzt, dass der Schriftzug immer mittig zum Foto angezeigt wird. […] Manchmal ist der Textzug weiter links, mal mittiger.

Kein Wunder bei

.Profilbild::after {
  position: absolute;
  left: 37%;
  bottom: 1em;   
}

Habt ihr eine bessere Lösung, die an den effekt von text-align: center herankommt?

Nicht absolute Positionierung verwenden. Sondern CSS Grid; da kannst du auch verschiedene Grid-Items in dieselbe Zelle packen.

.Profilbild:hover::after {
	font-size: larger;
	transition-duration: 0.2s;
}

Keine so gute Idee. Aus Performanz-Gründen sollte man nur bestimmte CSS-Eigenschaften animieren. font-size gehört IIRC nicht dazu. Aber scale.

Aber auch keine so gute Idee. Ich finde diese Art Hover-Effekt nicht nur völlig unnötig, sondern auch nervig. Wenn, dann gehört sowas in einen @media not (prefers-reduced-motion)-Block, damit der Wunsch der Nutzer, die soetwas nicht haben wollen (in den OS-Einstellungen angegeben), respektiert wird.

Alles anzusehen in diesem Beispiel.

Und da sieht man auch schon das nächste Problem: Wie stellst du sicher, dass die weiße Schrift auf dem Hintergrundbild lesbar ist, wenn es bei manchen Bildern dort hell ist?

Ein Gradient könnte etwas (aber nur etwas) Abhilfe schaffen. (Auskommentierung entfernen.)

Und du musst der Box eine dunkle Hintergrundfarbe geben – für den Fall, dass das Bild nicht geladen wird.

Kwakoni Yiquan