CSS Border nicht unter ganzem Element

lima-city: Webhosting, Domains und Cloud
2 Pluspunkte 0 Minuspunkte
Wie kann ich einen Border unter einer Überschrift anzeigen der aber nicht vie volle Breite der Überschrift hat sondern nur in der Mitte so wie es auf bild.de bei den Überschriften aussieht?
von  

2 Antworten

3 Pluspunkte 0 Minuspunkte

Dazu kannst du ein Pseudo-Element nutzen.

<style>
.border {
  text-align: center;
  position: relative;
}

.border::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px; 
  background-color: black; 
  position: absolute;
  bottom: 10;
  left: 50%;
  margin-left: -25px; /* Hälfte der Breite des Borders, um ihn mittig auszurichten */
}
</style>

Die Klasse weist du dann dem Überschrift Element zu.

<h1 class="border">Eine &Uuml;berschrift</h1>
von  
0 Pluspunkte 0 Minuspunkte

Um einen Border nur am unteren Rand eines Elements mit begrenzter Breite zu erstellen, kannst du die border-bottom Eigenschaft in Kombination mit der border-width Eigenschaft verwenden.

<!DOCTYPE html>
<html>
<head>
<style>
  .unterer-border {
    border-bottom: 2px solid black; /* Ändere die Farbe und Dicke nach Bedarf */
    width: 200px; /* Hier kannst du die Breite des Elements festlegen */
  }
</style>
</head>
<body>

<div class="unterer-border">
  Hier ist der Text mit einem Border am unteren Rand.
</div>

</body>
</html>
von  

Ähnliche Fragen

Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Fragen und Antworten bewerten
  • Themen von Fragen bearbeiten
  • Fragen, Antworten und Kommentare bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft.

2.3k Fragen

2.8k Antworten

266 Kommentare

14 Nutzer