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;
  }
}