Language-Selector
CODE
×
HTML
<div class='language-selector' role='list'><a href="#" role='listitem' class="language active">DE</a> <span>|</span> <a href="#" role='listitem' class="language" href="">FR</a> <span>|</span> <a href="#" role='listitem' class="language" href="">EN</a></div>
CSS
div.language-selector { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); margin-left: calc(0.25vw + 8px); display:inline-block; } div.language-selector:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.language { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; color: rgba(0,0,0,1); display: inline-block; height: 21px; line-height: 1.3; letter-spacing: 0.025rem; margin: 0 7px 0 7px; text-decoration: none !important; } @media screen and (max-width: 767px) { a.language { margin: 0 14px 0 14px; } .language-selector span { display: none; } } a.language:after { display: block; content: ''; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 100ms ease-in-out; } a.language:last-of-type { margin-right: 0; } a.language.active { border-bottom: 2px solid rgba(234,22,31,1); cursor: default !important; } a.language:hover::after, a.language:focus::after, a.language:active::after { transform: scaleX(1); } a.language.active:hover::after, a.language.active:focus::after, a.language.active:active::after { transform: scaleX(0); }
JS
Language-Selector
Letzte Änderung: 26.11.2024 - 14:06 Uhr
×
DE
|
FR
|
EN