CSS Border nicht unter ganzem Element

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