No son las típicas reglas horizontales

El estilo predeterminado del navegador hres muy extraño. Es básicamente:

border-style: inset;border-width: 1px;

El valor predeterminado border-colores black, pero el borde en realidad no parece negro, porque el borde insertado “agrega un tono dividido a la línea que hace que el elemento parezca ligeramente deprimido”.

Si levantas el border-widthbotón 40pxpodrás verlo más claramente:

A menudo se reinicia un hrpara que sea “solo una línea” y siempre me atrapa porque intento algo, como height: 1pxcon un fondo al principio, pero eso no está bien. La forma más fácil de borrarlo es desactivar todos los bordes y luego usar solo border-topo border-bottom. O desactive todos los bordes, establezca una altura y utilice un fondo.

Annnyway… Sara tiene algunas de las mejores reglas horizontales de la ciudad en el diseño actual de su sitio, y lo ha escrito todo. ¿Adivina qué? ¡Ni siquiera son hrelementos! Resulta que el único gancho de estilo que tienes es CSS, que no era tan adaptable como Sara necesitaba, por lo que terminó con un div role="separator"( ¡TIL !) y un SVG en línea.

La mejor manera de obtener la flexibilidad total de un SVG es incorporándolo. Pero el hrelemento no tiene contenido: no tiene etiquetas de apertura ni de cierre dentro de las cuales pueda colocar otros elementos.

La única manera de solucionar las limitaciones de hrpreservar la semántica para los usuarios de lectores de pantalla es usar divy proporcionar la semántica de un hruso ARIA.