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.
Pure CSS Responsive List & Tooltips Made with:
-
counter-reset
The counter-reset CSS property resets a CSS counter to a given value.
-
counter-increment
The counter-increment CSS property increases or decreases the value of a CSS counter by a given value.
-
content: counter();
The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.
-
::before / ::after
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.
-
position: absolute;
Absolute positioning brings very different results.
-
and little media queries
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).
@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;
}
}