CSS: add a horizontal line to fill in the space after text

by audetwebdesign

HTML

<h1>News<hr class="hline"></h1>

CSS

h1 {
    background-color: tan;
    display: table;
    width: 100%;
}
.hline {
    display: table-cell;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    border: none;
}
.hline:after {
    content: '';
    border-top: 1px solid blue;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}