HTML Element Style How to - Set the length of li tag border according to the width of text

Question

We would like to know how to set the length of li tag border according to the width of text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ol {<!-- w  w w . j a  v  a 2 s .c o  m-->
  list-style-type: none;
}

ol li {
  display: inline;
  padding-right: 4%;
}

ol li:hover span {
  border-bottom: 6px solid red;
}
</style>
</head>
<body>
  <ol>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>item one</span></li>
    <li><span>Company</span></li>
    <li><span>About</span></li>
    <li><span>item one</span></li>
  </ol>
</body>
</html>

The code above is rendered as follows: