List (also with linked items)
CODE
×
HTML
<ul class=''><li>Normal list item</li> <li><a href="#">More Information</a></li> <li class="external"><a href="#">Lantal Portal</a></li> <li class="download"><a href="#" download>Download product leaflet (PDF)</a></li> <li>Long text list item (Herculanum dolorem Ipsum solet xevier honoris causa declinare plebs verum honorem erus)</li> <li>Normal list item</li></ul>
CSS
ul { line-height: var(--lh-xl); } ul { list-style-type: none; margin: 0; padding: 0; } ul li { position: relative; padding-left: 21px; line-height: 1.2; margin-top: 1.75rem; margin-bottom: 1.75rem; } ul > li > ul > li { margin-bottom: 0; padding: 0; margin-top: 6px; font-size: smaller; } ul li::before { content: "+"; position: absolute; left: 0; top: 0; } footer li, li.download { list-style-type: none; padding: 0; margin-left: 0px; } footer li::before, ul li.download::before { content: ""; padding-left: 0px; } footer li a[href^="http"], li.download a { text-indent: 21px; display: inline-block; text-decoration: none; position: relative; } footer li a[href^="http"]::before, li.download a::before { position: absolute; content: ''; background-size: contain; } footer li a[href^="http"]::before { background-image: url('data:image/svg+xml;utf8,
'); width: 16px; height: 16px; left: -3px; top: 1px; } footer li a[href^="http"]:hover::before { background-image: url('data:image/svg+xml;utf8,
'); } li.download a::before { background-image: url('data:image/svg+xml;utf8,
'); width: 26px; height: 26px; left: -8px; top: 10px; transform: translateY(-52%); } li.download a:hover::before { background-image: url('data:image/svg+xml;utf8,
'); } @media screen and (max-width: 575px) { footer li a[href^="http"], li.download a { text-indent: 20px; } footer li a[href^="http"]::before { width: 13px; height: 13px; top: 3px; } li.download a::before { width: 24px; height: 24px; top: 11px; } }
JS
List (also with linked items)
Last Edit: Dec 8, 2023, 9:38am
×
Normal list item
More Information
Lantal Portal
Download product leaflet (PDF)
Long text list item (Herculanum dolorem Ipsum solet xevier honoris causa declinare plebs verum honorem erus)
Normal list item