CSS Responsive List with Tooltips

freefrontend.com freefrontend.com3 years ago in #Dev Love388

Pure CSS responsive ordered list & tooltips made with: counter-reset, counter-increment, content: counter();, ::before/::after, position:absolute; and media queries. Photo by Pika on Unsplash.Compatible browsers: Chrome, Edge, Firefox, Opera, Safari. <section class=”list–wrapper”> <h1 class=”list–title”>Pure CSS Responsive List & Tooltips Made with:</h1> <ol class=”list”> <li class=”list–item”> <a href=”javascript:void(0)” class=”list–link”> <h2 class=”list–link__header”><span>counter-reset</span></h2> <p class=”list–link__description”>The counter-reset CSS property resets a CSS counter to a given value.</p> </a> </li> <li class=”list–item”> <a href=”javascript:void(0)” class=”list–link”> <h2 class=”list–link__header”><span>counter-increment</span></h2> <p class=”list–link__description”>The counter-increment CSS property increases or decreases the value of a CSS counter by a given value.</p> </a> </li> <li class=”list–item”> <a href=”javascript:void(0)” class=”list–link”> <h2 class=”list–link__header”><span>content: counter();</span></h2> <p class=”list–link__description”>The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.</p> </a> </li> <li class=”list–item”> <a href=”javascript:void(0)” class=”list–link”> <h2 class=”list–link__header”><span>::before / ::after</span></h2> <p class=”list–link__description”>The pseudo-elements generated by ::before and ::after are contained by the element’s formatting box, and thus don’t apply to replaced elements such as img, or to elements.</p> </a> </li> <li class=”list–item”> <a href=”javascript:void(0)” class=”list–link”> <h2 class=”list–link__header”><span>position: absolute;</span></h2> <p class=”list–link__description”>Absolute positioning brings very different results.</p> </a> </li> <li class=”list–item”> <a href=”javascript:void(0)” class=”list–link”> <h2 class=”list–link__header”><span>and little media queries</span></h2> <p class=”list–link__description”>Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).</p> </a> </li> </ol> </section> @import url(“https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,700&display=swap”); body { margin: 0; padding: 0; font-size: 12px; font-family: “Roboto”, sans-serif; color: #fff; background: url(https://freefrontend.com/assets/img/css-snippets-demo/002.jpg) no-repeat center center fixed; background-size: cover; } .list–wrapper { position: relative; margin: auto 2em; max-width: 1140px; } .list–title { margin: 50px 0 25px; padding-bottom: 5px; font-size: 20px; font-weight: 700; border-bottom: 2px solid; } .list { counter-reset: list; list-style: none; padding: 0; } .list–item { counter-increment: list; position: relative; padding-left: 1.4em; font-size: 28px; } .list–item::before { content: counter(list); position: absolute; top: 0.4em; left: 0; width: 2em; height: 2em; border-radius: 50%; font-size: 0.4em; font-weight: 700; line-height: 2em; text-align: center; color: #141414; background-color: #fff; } .list–link { position: relative; display: block; width: 100%; text-decoration: none; color: inherit; } .list–link__header { position: relative; width: 100%; margin: 0; padding: 0 0 6px; font-size: inherit; } .list–link__description { max-width: 650px; margin: 0 0 25px; padding: 10px 13px; line-height: 1.5; letter-spacing: 0.05em; font-family: “Roboto Mono”, monospace; font-size: 14px; font-weight: 400; background-color: #141414; } @media (min-width: 575px) { .list–item { font-size: 30px; } } @media (min-width: 767px) { .list–item { font-size: 32px; } } @media (min-width: 991px) { .list–item { font-size: 34px; margin-bottom: 20px; } .list–link__header { padding-right: 20px; } .list–link__header span { position: relative; padding: 0 10px 0 0; } .list–link__header span::after { display: none; content: “”; position: absolute; top: 50%; left: 100%; width: calc(800px – 100%); border-bottom: 1px solid; } .list–link:hover .list–link__header span::after { display: block; } .list–link__description { display: none; position: absolute; top: 50%; left: 500px; transform: translate3d(0, -50%, 0); max-width: calc(100% – 500px); padding: 10px 13px; border: 1px solid; z-index: 2; } .list–link:hover .list–link__description { display: block; } } @media (min-width: 1199px) { .list–item { font-size: 36px; } } URL Out – https://freefrontend.com/css-responsive-list-with-tooltips/Author – freefrontend.comDate – 2019-10-18 23:20:14

Like to keep reading?

This article first appeared on freefrontend.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply