Inpage-Navigation Title (H4)
CODE
×
HTML
<a class='inpage-nav-title'>Inhaltsübersicht</a>
CSS
a.inpage-nav-title { position:relative; display:block; text-decoration:none; border:none; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-size: 24px; line-height: 28px; padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 65px; max-width: 800px; color: var(--black); } a.inpage-nav-title:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMTAuNywwLjlMNiw1LjdMMS4zLDAuOUwwLjYsMS42TDYsNy4xbDUuNC01LjVMMTAuNywwLjl6Ii8+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; content: ' '; position: absolute; width: 24px; height: 16px; right: 28px; top: 29px; background-size: 24px 16px; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: rotate(-180deg) !important; -ms-transform: rotate(-180deg) !important; transform: rotate(-180deg) !important; } @media screen and (max-width: 767px) { a.inpage-nav-title { font-size: 18px; line-height: 21px; } } ul.inpage-nav a.inpage-nav-title[aria-selected='true']::before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); transition: all 250ms ease-in-out } ul.inpage-nav a.inpage-nav-title[aria-selected='false']::before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition: all 250ms ease-in-out } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Inpage-Navigation Title (H4)
Letzte Änderung: 03.07.2021 - 10:17 Uhr
×
Inhaltsübersicht