[CSS] Use Generated Content to Augment Information

When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content attribute of a pseudo element.

 

[data-length]:hover:after {
  content: attr(data-length)  " / "  attr(data-weight);
  color: orange;
  position: absolute;
  right: 1em;
}

 

    <ul>
      <li data-length="12-13 m" data-weight="9,000 kg">Tyrannosaurus</li>
      <li data-length="8-9 m" data-weight="1,500 kg">Carnotaurus</li>
      <li data-length="4-5 m" data-weight="2,500 kg">Stegosaurus</li>
      <li data-length="8-9 m" data-weight="6,000 kg">Triceratops</li>
    </ul>