undefined

<!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:after {
  content: attr(data-length)  " / "  attr(data-weight);
  color: orange;
  position: absolute;
  right: 1em;
}