::After-Pseudoelement mittig zu Element platzieren

[Rolf B]

Hallo Gunnar,

Kontrast Text/Bild

Beispielsweise so:

figcaption {
  --shadow-color: black;
}
figcaption::before {
  content: "-> Profil";
  color: white;
  text-shadow:  2px  2px 3px var(--shadow-color),
               -2px  2px 3px var(--shadow-color),
                2px -2px 3px var(--shadow-color),
               -2px -2px 3px var(--shadow-color);
}
a:is(:focus,:hover) figcaption::before {
   color: darkblue;
   --shadow-color: yellow;
}

Ob das ideal ist, sei dahingestellt. Mir ging's jetzt um die Texthervorhebung mit text-shadow. Statt dessen könnte man auch -webkit-text-stroke verwenden (was alle Browser können).

Das "→ Profil" ist ein visueller Hinweis auf den verlinkten Inhalt. Kann man machen, denke ich, wenn es noch einen visuell versteckten Zusatztext gibt, der einen Screenreader dazu bringt, korrekt ansagen, dass man auf einem Link ist, der zum Profil von Moritz Mustermann führt. Wie man das auf der Seite von Tobias konkret gestaltet, müsste man am lebendigen Subjekt sehen, deswegen fragte ich ja nach einem Link auf die Seite. Dann kann man auch Rat geben, wie man das konkret mit grid löst.

Rolf