CSS/Tutorials/Überschrift mit Linie links und rechts

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Linie als Hintergrund

Die „einfache“ Lösung, die gewünschte Linie als Hintergrund darzustellen, hat unübersehbar den Nachteil, dass die Linie auch den Text der Überschrift durchstreicht.

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Überschrift mit Linie</title>
    <style>
      h1 {
        text-align: center;
        
        background-image: linear-gradient(to right, #c4d4da 50%, transparent 50%);
        background-position: 0 50%;
        background-repeat: repeat-x;
        background-size: 1em 2px;
      }
    </style>
  </head>
  <body>
    <h1>Eine Überschrift</h1>
  </body>
</html>

Lösungsversuch mit zusätzlichen Elementen

Um dieses zu unterbinden, gibt es mehrere Möglichkeiten, etwa ein zusätzliches span-Element zu verwenden und diesem den gewünschten Hintergrund sowie Innenabstand zu geben. Dies wirft spätestens dann Probleme auf, wenn für die Überschrift ein farbiger Hintergrund gewünscht wird oder diese sich in einem Element mit farbigen Hintergrund befinden soll. Außerdem sollte man auf zusätzliche Elemente aus Präsentationsgründen möglichst verzichten.

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Überschrift mit Linie</title>
    <style>
      h1 {
        text-align: center;
        
        background-image: linear-gradient(to right, #c4d4da 50%, transparent 50%);
        background-position: 0 50%;
        background-repeat: repeat-x;
        background-size: .5em 2px;
      }
      h1 span {
        background: white;
        padding: 0 .5em;
      }
      section, article {
        margin: 2em 0;
        border: 1px solid;
      }
      
      section h1 {
        background-image: linear-gradient(to right, #c4d4da 50%, transparent 50%), linear-gradient(to right, red, yellow);
        background-position: 0 50%, 0 0;
        background-repeat: repeat-x, no-repeat;
        background-size: .5em 2px, 100%;
      }
      article {
        background-image: linear-gradient(to right bottom, red, yellow);
      }
    </style>
  </head>
  <body>
    <h1><span role="presentation">Eine Überschrift</span></h1>
    <section>
        <h1><span role="presentation">innerhalb eines section-Elementes</span></h1>
        <p>Hier hat die Überschrift einen zusätzlichen Farbverlauf.</p>
    </section>
    <article>
        <h1><span role="presentation">innerhalb eines article-Elementes</span></h1>
        <p>Hier hat das umgebende Element einen zusätzlichen Farbverlauf.</p>
    </article>
  </body>
</html>

geschickter Einsatz von Pseudoelementen

Um eine Lösung zu finden, die für alle Hintergründe geeignet ist und auf zusätzliche Elemente verzichtet, muss man schon tief in die CSS-Trickkiste greifen.

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Überschrift mit Linie</title>
    <style>
      h1 {
        text-align: center;
               
        display: table;
        border-collapse: collapse;
        white-space: nowrap;
      }
      h1::before, h1::after {
        content: "";
        display: table-cell;
        width: 50%;

        background-image: linear-gradient(to right, #c4d4da 50%, transparent 50%);
        background-position: 0 50%;
        background-repeat: repeat-x;
        background-size: 6px 2px;
      }
      h1::before {
        border-right: .5em solid transparent;
      }
      h1::after {
        border-left: .5em solid transparent;
      }
      
      section, article {
        margin: 2em 0;
        border: 1px solid;
      }
      section h1 {
        background-image: linear-gradient(to right, red, yellow);
      }
      article {
        background-image: linear-gradient(to right bottom, red, yellow);
      }
    </style>
  </head>
  <body>
    <h1>Eine Überschrift</h1>
    <section>
        <h1>innerhalb eines section-Elementes</h1>
        <p>Hier hat die Überschrift einen zusätzlichen Farbverlauf.</p>
    </section>
    <article>
        <h1>innerhalb eines article-Elementes</h1>
        <p>Hier hat das umgebende Element einen zusätzlichen Farbverlauf.</p>
    </article>
  </body>
</html>

Zunächst einmal werden für die Linien selbst die Pseudoelemente before und after herangezogen, welche als Tabellenzellen dargestellt werden. Dazu wird durch den Browser ein anonymes übergeordnetes table-element erstellt. In unserem Fall soll dies die Überschrift sein. Deshalb haben wir ihr display: table zugeordnet. Der Rest ist dann einfach: Die Pseudoelemente bekommen eine Breite von 50% und transparente Rahmen.

Bei Überschriften, die aus mehreren Wörtern bestehen, muss man durch white-space: nowrap den Zeilenumbruch verhindern. Das könnte unter Umständen nachteilig sein, wenn der Viewport sehr schmal wird. Mithilfe einer media-query lässt sich der dann gewünschte Umbruch wieder herstellen.

Quelle

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Überschrift_mit_Linie_links_und_rechts&oldid=57001“