CSS: fare a meno dell'elemento hr con il contenuto generato

Questo elemento presentazionale può essere sostituito dal contenuto generato CSS.

È sufficiente selezionare uno o più elementi (usando ad esempio un selettore di classe in questo caso) e applicare il contenuto generato in questo modo (esempio puramente indicativo):

.has-hr:after {
    content: '';
    display: block;
    margin: 1.5em 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

L'unico vero caso d'uso dell'elemento hr si ha con gli editor WYSIWYG dei CMS in cui effettivamente questo elemento trova un'applicazione pratica. Tuttavia se si utilizza ad esempio un visual composer si potrebbe specificare tramite classe CSS che un determinato blocco abbia una riga orizzontale dopo il suo contenuto usando in tal modo la soluzione CSS.