Using pseudo content instead of empty span for gradient

markup.html

<div id=conference-call>
  <div class="datetime">
    <span>Sept</span>
    <span>25</span>
    <span>11:30 <strong>AM</strong></span>
  </div>
</div>
​

styles.css

#conference-call .datetime {
    width: 115px;
    font-family: Helvetica
}

#conference-call .datetime span {
    display: inline-block;
    background: #393939;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    width: 68px;
    margin-bottom: 3px;
    text-align: center;
    padding: 6px 0;
    font-size: 18px;
    letter-spacing: -1px;
}

#conference-call .datetime span + span {
    width: 43px;
}

#conference-call .datetime span + span + span {
    display: block;
    width: 100%;
    font-size: 30px;
    position: relative;
}

#conference-call .datetime span + span + span > strong {
    font-size: 14px;
}

#conference-call .datetime span + span + span:after {
    content: '';
    position: absolute;
    top: 22px;
    left: 0;
    width: 100%;
    height: 7px;
    border-top: 1px solid #393939;

    background: transparent;
    background: -moz-linear-gradient(top,  #fff 0%, #393939 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#393939));
    background: -webkit-linear-gradient(top,  #fff 0%,#393939 100%);
    background: -o-linear-gradient(top,  #fff 0%,#393939 100%);
    background: -ms-linear-gradient(top,  #fff 0%,#393939 100%);
    background: linear-gradient(top,  #fff 0%,#393939 100%);
    
    opacity: 0.15;
    -moz-opacity: 0.15;
    filter:alpha(opacity=15);
}​