Page Widget How to - Create shrinkable bottom border

Question

We would like to know how to create shrinkable bottom border.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from  w  ww  . j  a  v a 2 s.  c  om-->
  line-height: 150%;
  border-bottom: 5px solid #d71d00;
}

div span {
  position: relative;
  bottom: -10px;
  background: #fff;
  padding: 0 5px;
  color: #82439a;
  font-size: 16px;
  font-weight: bold;
  font-family: tahoma;
}
</style>
</head>
<body>
  <div>
    <span>Photoshop</span>
  </div>
  <div>
    <span>Adobe Illustrator</span>
  </div>
  <div>
    <span>3D Max</span>
  </div>
  <div>
    <span>Maya</span>
  </div>
  <div>
    <span>Windows 8 Pro</span>
  </div>
</body>
</html>

The code above is rendered as follows: