Barra separadora HR con puro CSS3

En ocasiones es necesario agregar alguna linea separadora, por ejemplo para separar los artículos ó los párrafos de algún contenido, para definir el estilo a estas barras existen distintas técnicas. Sin embargo hace poco vi algunas en CSS tricks que me gustaron:

Ejemplos HR con solo CSS en la página de CSS-Tricks

Me gusto el hecho que solo requieren de puro Código CSS y con el HTML solo le damos estilo a dicha separadores, haciendo con esto una implementación bastante eficiente.

Especialmente me gusto la propuesta de Tomas Theunissen (el estilo con las borde redondos) y también me gusto el estilo de Harry Roberts (el que tiene el simbolo § en el centro).

Haciendo una combinación El diseño web es como recetas de cocinas puedes combinarnas y con esto obtener nuevas recetas

Vamos hacer una barra híbrida entre ambos estilos propuestos, como se muestra a continuación:

Para conseguir esto es necesario re-utilizar el código CSS y generar el siguiente:

/* Vamos a definir una barra separadora con el estilo de propuesto
 * por: Tomas Theunissen combinado con el de Harry Roberts 
 * 
 * Para mayor información: http://css-tricks.com/examples/hrs/
 * */ 
hr.separador_post { 
 height: 30px;
 border-style: solid;
 border-color: #BFBFBF;
 border-width: 2px 0 0 0;
 border-radius: 20px;
 text-align: center;
}

hr.separador_post:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    -webkit-border-radius:20px;
       -moz-border-radius:20px;
            border-radius:20px;
}

hr.separador_post:after {
    content: '★';
    color: #DC5500;
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

El código anterior define la clase separador_post, el cual tiene bordes redondos al cual le agregue como símbolo una estrella de color anaranjada. Ahora solo faltaría agregar el siguiente código Html para usarla:

<hr class='separador_post'/>

About Author

Miguel

Ingeniero en computación, maestrante científico de datos, developer Python/R/JS/PHP/Bash/Rust, Gestor open‑source, community developer & Linux Lover..

Publicaciones del Autor