Würzburger Str 13, 63811 Stockstadt Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.

Test: Überschrift mit Linien

Alle drei Varianten verwenden die gleichen CSS-Angaben - entweder aus dem installierten UIKit-Framework-Plugin oder durch Eintrag in der custom.css z.B. von Astroid. Die zugehörige Klasse ist .uk-heading-line.

Die Textausrichtung wird durch einen text-align-style des Überschrift-Elements gegeben; die zentrierte Version kann auch durch die Klasse uk-text-center erreicht werden.

Der Text der Überschrift muss von "span" umgeben sein.
Code-Beispiel:

<h1 id="überschrift-rechtsbündig,-linie-links" class="uk-heading-line" style="text-align: right;"><span>H1-Überschrift rechts, Linie links</span></h1>

 

H1-Überschrift rechts, Linie links

Vivamus in sem lobortis, eleifend odio quis, ultrices lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas et mauris ac mauris varius sagittis a vitae risus. Aliquam enim velit, varius tincidunt nibh sit amet, pretium mollis enim. Aenean sed vestibulum diam. Ut ipsum ipsum, vestibulum euismod velit in, ornare gravida enim. Morbi vulputate, est at fringilla auctor, metus lorem lacinia eros, in finibus quam leo quis urna. Maecenas sed nisi vel mauris finibus maximus. Cras molestie lacus in arcu luctus, sed imperdiet tortor tincidunt. Maecenas venenatis suscipit consequat. Maecenas gravida ligula et velit lacinia, vitae pulvinar ex consectetur. Nulla facilisis nunc magna, non commodo eros hendrerit eu.

 

H2-Überschrift zwischen zwei Linien

Vivamus in sem lobortis, eleifend odio quis, ultrices lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas et mauris ac mauris varius sagittis a vitae risus. Aliquam enim velit, varius tincidunt nibh sit amet, pretium mollis enim. Aenean sed vestibulum diam. Ut ipsum ipsum, vestibulum euismod velit in, ornare gravida enim. Morbi vulputate, est at fringilla auctor, metus lorem lacinia eros, in finibus quam leo quis urna. Maecenas sed nisi vel mauris finibus maximus. Cras molestie lacus in arcu luctus, sed imperdiet tortor tincidunt. Maecenas venenatis suscipit consequat. Maecenas gravida ligula et velit lacinia, vitae pulvinar ex consectetur. Nulla facilisis nunc magna, non commodo eros hendrerit eu.

 

H3-Überschrift links, Linie rechts

Vivamus in sem lobortis, eleifend odio quis, ultrices lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas et mauris ac mauris varius sagittis a vitae risus. Aliquam enim velit, varius tincidunt nibh sit amet, pretium mollis enim. Aenean sed vestibulum diam. Ut ipsum ipsum, vestibulum euismod velit in, ornare gravida enim. Morbi vulputate, est at fringilla auctor, metus lorem lacinia eros, in finibus quam leo quis urna. Maecenas sed nisi vel mauris finibus maximus. Cras molestie lacus in arcu luctus, sed imperdiet tortor tincidunt. Maecenas venenatis suscipit consequat. Maecenas gravida ligula et velit lacinia, vitae pulvinar ex consectetur. Nulla facilisis nunc magna, non commodo eros hendrerit eu.

 

CSS-Code:

.uk-heading-line{overflow:hidden;} /* kann auch ein umgebendes div sein */
.uk-heading-line > * {
  display: inline-block;
  position: relative;
}

.uk-heading-line > ::before,
.uk-heading-line > ::after {
  content: "";
 
position: absolute; /* 1. Center vertically */
top: calc(50% - (calc(0.2px + 0.05em) / 2)); /* 2. Make the element as large as possible. */
width: 2000px; /* It's clipped by the container. */  
border-bottom: calc(0.2px + 0.05em) solid #028bdb; /* 3. Style der Linie */
}

.uk-heading-line > ::before {
  right: 100%;
  margin-right: calc(5px + 0.3em);
}
.uk-heading-line > ::after {
  left: 100%;
  margin-left: calc(5px + 0.3em);
}
.uk-text-center {
    text-align: center !important;}
/* ==================================*/