Page Widget How to - Style the first letter inside a span

Question

We would like to know how to style the first letter inside a span.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
span:first-letter {<!--  w  w  w . jav  a 2s.c  om-->
  font-size: 2em;
}

span {
  display: inline-block;
}

</style>
</head>
<body>
  <div>
    <p>
       <span>this is a test</span>
    </p>
  </div>
</body>
</html>

The code above is rendered as follows: