hidden-line-behind-text-technique-in-css.css

.nom {
    border-bottom: 1px solid #CCC;
    position: relative;
}
.nom:after {
    background: #FFF;
    content: attr(data-title);
    color: #CCC;
    font: bold 14px Helvetica;
    height: 11px;
    left: 100px;
    position: absolute;
    text-transform: uppercase;
    top: -8px;
    z-index: 50;
}
.nom:before {
    background: #FFF;
    content: "";
    height: 11px;
    left: 90px;
    line-height: 0;
    position: absolute;
    top: -6px;
    width: 152px;
    z-index: 49;
}

/* HTML: <div class="nom" data-title="Why hello thar!"></div> */