footer example

by Jens Kühn

HTML

<div class="wrapper">
  <div class="left">
    Links
  </div>
  <ul style="--h-c: '116.15 EUR \A 99,894.15 GBP \A 12.222.222.222.15 US'">
    <li><i></i><span>116.15</span><small>EUR</small></li>
    <li><i></i><span>99,894.15</span><small>GBP</small></li>
    <li><i></i><span>12.222.222.222.15</span><small>USD</small></li>
  </ul>
</div>
<div class="wrapper">
  <div class="left">
    Links
  </div>
  <ul style="--h-c: '116.15 EUR'">
    <li><i></i><span>116.15</span><small>EUR</small></li>
  </ul>
</div>
<div class="wrapper">
  <div class="left">
    Links
  </div>
  <ul style="--h-c: '116.15 EUR \A 12.222.222.222.15 US'">
    <li><i></i><span>116.15</span><small>EUR</small></li>
    <li><i></i><span>12.222.222.222.15</span><small>USD</small></li>
  </ul>
</div>

SCSS

body {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-column-gap: 16px;
}
.wrapper {
  border: solid 1px blue;
  width: 100%;
  height: 50px;
  
  margin-top: 250px;
  
  
  
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  
  .left {
    height: 50px;
    align-items: center;
    display: flex;
  }

    
  ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 50px;
    &::before {
      content: '∑';
      margin-top: 14px;
    }
  }
  li {
    position: relative;
  
    flex-basis: 1fr;
    display: block;
    list-style-type: none;
    padding: 15px 8px;
    margin: 0;
    span {
      padding-right: 4px;
    }
    i {
      position: absolute;
      color: red;
      background: grey;
      font-size: 3em;
      top: -19px;
      right: 1em;
      height: 18px;
      width: 100%;
      &::before {
        // content: ' ⃛';
        content: '...';
        color: blue;
        background: yellow;
        position: absolute;
        top: -12px;
        height: 0;
        left: 50%;
      }
      
      &:hover {
        color: green;
      
        &::before {
          color: green;
          content: var(--h-c);
          position: fixed;
          background: orange;
          text-align: end;
          padding: 8px 16px;
          font-size: 1rem;
          font-style: normal;
          top: unset;
          right: unset;
          width: unset;
          height: unset;
          left: unset;
          transform: translateY(-100%);
          white-space: pre-wrap;
          z-index: 1;
        }
      }
    }
  }
}