Einem umrandeten div einen Text im border hinzufügen

[Rolf B]

Hallo Linuchs,

es wäre wichtig zu wissen, was Du sonst noch so alles gemacht hast. Dein CSS allein ist's nicht.

Gerade probiert:

article {
  position: absolute;
  border: 1px solid black;
  padding: 0.5em;
  width: 6em;
  height: 2em;
}

article.mutter::before {
  content: "Mutter";
  position: absolute;
  font-size: 75%;
  top: -0.5em; left: 1em;
  background: #fff;
  padding: 0 0.5em;
}

<article class="eltern mutter">
Elisabeth Müller
</article>

Einwandfreier weißer Hintergrund für die Mama, auch ohne Nuke

Ich bin aber noch nicht überzeugt davon, dass ein ::before-Element die richtige Lösung ist. Ein Screenreader würde seinen Inhalt nicht vorlesen, hier sagt das W3C beispielsweise, dass Texte in ::before und ::after rein dekorativen Charakter haben müssen und keine relevanten Inhalte zeigen dürfen. Bei "Mutter" ist das aber der Fall. Deswegen tendiere ich zum Fieldset mit legend - in der Hoffnung, dass die Semantik passt.

Look Ma, no absolute positioning necessary:

fieldset {
  width: 6em;
  margin: 0;
  padding: 0 0.5em 0.5em 0.5em;
}
fieldset legend {
  font-size: 75%;
  margin: 0;
  padding: 0 0.5em;
}
fieldset p {
  margin: 0; padding: 0;
}

<fieldset>
  <legend>Mutter</legend>
  <p>Elisabeth Müller</p>
</fieldset>

Rolf