css3 - How to get hovering shadow under a letter with CSS-only? -

i reproduce following logo, add shadow below 1 letter in using css.

how box-shadow overflow on both side of letter ? prefer avoid having <span class="shadow"></span> following "hovering" letter manage letter tag/css rule (see html below).

n.b.: i'm aware of jquery / css3 animated shadow effect.

html

<span>pr<span class="text-info">o</span>be</span> 

css

element.style {     box-shadow: 0 4px 3px #aaaaaa;     position: relative;     top: -3px; } 

using pseudo-elements (:before , :after), :hover , opacity properties, solution looks following (it can extended w/animation effects on opacity)

html

<div class="text-effects"><span>pr<span class="text-info">o</span>be</span></div> 

css

body {     font-size: 10em;     font-family: arial; }  div.text-effects {     text-transform:uppercase; }  span.text-info {     position: relative;     cursor:pointer; }  .text-info:hover {     color: #008080;     bottom: 0.1em; }  span.text-info:before {     content: ".";     color: transparent;     position: absolute;     width: 40%;     box-shadow: 0 5px 4px -4px #303030;     display: block;     left: 30%;     bottom: 1em;     opacity:0; } span.text-info:after {     content: ".";     color: transparent;     position: absolute;     bottom: 0;     width: 40%;     box-shadow: 0 5px 4px -4px #303030;     display: block;     left: 30%;     bottom:0.15em;     opacity:0; }  span.text-info:hover:before{     opacity:1; }  span.text-info:hover:after{     opacity:1; }