Splitter List
CODE
×
HTML
<ul class='splitter-list'><li><a class="splitter" href="#1">Den Termin Ihrer Fahrzeugkontrolle verschieben</a></li> <li><a class="splitter" href="#2">Ihre Fahrzeugsteuern berechnen</a></li> <li><a class="splitter" href="#3">Tagesausweis und Tagesnummernschild beantragen</a></li> <li><a class="splitter" href="#4">Sehtest oder medizinische Kontrolle ablegen</a></li></ul>
CSS
ul.splitter-list { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; max-width: 800px; } ul { color: rgba(0,0,0,1); font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 16px; line-height: 26px; padding: 0; } ul.splitter-list li { list-style: none; display: block; } @media screen and (min-width: 768px) { ul.splitter-list li { list-style: none; width: 47.5%; margin-right: 2%; display: inline-block; vertical-align: top; } } a.splitter { position: relative; color: rgba(0,0,0,1); font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 18px; cursor: pointer; line-height: 125%; text-decoration: none; display: inline-block; border-bottom: 1px solid rgba(255,255,255,0); margin-top: 14px; margin-bottom: 14px; margin-left: 42px; padding-bottom: 2px; } a.splitter:hover, a.splitter:focus { text-decoration: none !important; } a.splitter::before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMiAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJyaWdodC1hcnJvdy13aGl0ZSIgZD0iTTIxLDIuMmMtMC40LTAuNC0xLTAuNC0xLjQtMC4xYy0wLjQsMC40LTAuNCwxLTAuMSwxLjRsMCwwbDcuNCw3LjRIMi42Yy0wLjYsMC0xLDAuNC0xLDFsMCwwDQoJYzAsMC42LDAuNSwxLDEsMWwwLDBoMjQuM2wtNy40LDcuNGMtMC40LDAuNC0wLjQsMSwwLDEuNWMwLjQsMC40LDEsMC40LDEuNCwwbDAsMGw5LjEtOS4xYzAuNC0wLjQsMC40LTEsMC0xLjRsMCwwTDIxLDIuMnoiLz4NCjwvc3ZnPg=='); background-attachment: scroll; background-position: center center; background-size: auto; background-repeat: no-repeat; width: 24px; height: 20px; content: ' '; position: absolute; left: -42px; top: 1px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a.splitter:hover::before, a.splitter:focus::before, a.splitter:active::before { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } @media screen and (max-width: 767px) { a.splitter::before, a.splitter::before, a.splitter::before { width: 22px ; height: 20px; left: -38px; top: 0px; } a.splitter { font-size: 16px; line-height: 125%; margin-left: 38px; } }
JS
Splitter List
barrierefrei
Erstellt: 26.04.2023 - 09:46 Uhr
Letzte Änderung: 15.05.2023 - 01:07 Uhr
×
Den Termin Ihrer Fahrzeugkontrolle verschieben
Ihre Fahrzeugsteuern berechnen
Tagesausweis und Tagesnummernschild beantragen
Sehtest oder medizinische Kontrolle ablegen