markup.html

<div class="datetime">
    <span>Sept</span>
    <span>25</span>
    <span>11:30 <strong>AM</strong> <span></span></span>
</div>

styles.css

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

#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 > span {
    position: absolute;
    background: transparent;
    top: 22px;
    width: 100%;
    left: 0;
    height: 7px;
    border-top: 1px solid #393939;
    
    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);
}

Might wanna wrap the html in a div with the id of conference-call

My fork shows how you could use pseudo content instead of an empty span to create the gradient effect. You can see it in action on jsFiddle. Pseudo content is supported in IE8+ which is fine since only those newer browsers will see the gradient anyway. Clean markup rocks :)