CSS: Generated Content

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Dinosaurs</h1>
    <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>
  </body>

</html>

// Code goes here

/* Styles go here */

html { 
  font-family: sans-serif; padding-top: 3em; 
} 
h1 {
  color:orange
} 
ul {
  margin: 0; padding:0;
}
li { 
  font-weight: bold; list-style: none; border: 1px solid gray; padding: 0.5em 1em; border-radius: 4px; margin-bottom: 0.5em; position: relative;
}

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