lock [GELÖST] ONEPAGE - Unterstrich-Design in Headern ändern

  • Beiträge: 12
  • Dank erhalten: 1

[GELÖST] ONEPAGE - Unterstrich-Design in Headern ändern wurde erstellt von andreasjell

Für den Border, also den Unterstrich, gibt es 3 Definitionen mit 30%,40%und 50%, die sich allerdings auf die Containerbreite beziehen:

headline-border-30
headline-border-40
headline-border-50

Diese sind als Style im jeweiligen Container im Layout eingetragen.

Ich habe daraus einen Style gebaut, der den Border immer so breit macht, wie der Text lang ist:
/* Headlines Border 00*/
.headline-border-00 .module-title {
    position: relative;
    padding-bottom: 0.9rem;
    display: inline-block;
    margin: 0 0 1.4em;
    padding: 0 0em 0.4em 0;
}
.headline-border-00 .module-title::after {
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
    background-color: var(--bs-primary);
    border: none;
}

Mit der Padding-Anweisung kann der Unterstrich auch länger oder kürzer gemacht werden, aber immer im Bezug zur Textlänge.

Danke und viele Grüße
Andreas
Letzte Änderung: 2 Wochen 1 Tag her von andreasjell.
2 Wochen 1 Tag her #1
Dieses Thema wurde gesperrt.

Installations-Service

Sparen Sie Zeit, wir installieren ihr gekauftes Joomla Template
mit all den dazugehörigen Extensions und dem "Demo Inhalt" innerhalb der nächsten 24 Stunden
auf einem Server/Webhost ihrer Wahl

Kaufen - 59€

Copyright © 2022 Joomlaplates | Joomla 4 Templates mit Uikit 3

Impressum & Datenschutz | AGB