¿Cómo puedo crear una “línea de fondo” de estilo de leyenda de campo en el texto del encabezado?

Estoy intentando diseñar el texto del encabezado de manera similar a como aparece el texto predeterminado de la leyenda en los conjuntos de campo; es decir, me gustaría que apareciera una línea similar a tachado, pero no a través del texto. Parece que no puedo encontrar ninguna información sobre cómo podría lograr esto, y dado que en muchas otras preguntas Google siempre me dirigió a Stack Overflow para obtener respuestas, pensé que alguien aquí podría darme consejos.

Para mayor claridad Estoy intentando obtener este efecto en el texto del encabezado:

                               Texto de encabezado centrado                               

¿Hay alguna manera de hacer esto?

    Ver: http://jsfiddle.net/thirtydot/jm4VQ/

    Si el texto debe ajustarse, esto no funcionará. En IE7, no habrá línea.

    HTML:

    Centered Header Text

    CSS:

     h2 { text-align: center; display: table; width: 100%; } h2 > span, h2:before, h2:after { display: table-cell; } h2:before, h2:after { background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center; width: 50%; content: ' '; } h2 > span { white-space: nowrap; padding: 0 9px; } 

    Se me ocurrió una solución rápida, sin imágenes, que parece funcionar bastante bien en IE 8+ y otros navegadores, mientras se degrada graciosamente en IE 6/7:

     

    CSS 2.1 EXAMPLE

     h1 { position: relative; text-align: center; } h1:first-line { background-color: white; } h1:before { position: absolute; z-index: -1; content: ''; left: 0px; right: 0px; height: 1px; top: 50%; background-color: black; } 

    Sin embargo, tiene las siguientes limitaciones:

    • El texto debe coincidir exactamente con el color de fondo general, de lo contrario, se verá raro.
    • Si desea cualquier tipo de relleno en el texto, debe utilizar espacios sin interrupción en cualquier lado del texto (ver demostración).
    • El texto del encabezado siempre debe estar en una línea (funciona mejor si es de ancho fijo).

    Aquí hay una demostración: http://jsfiddle.net/AndyE/3tFQJ/

    Editar:

     

        Your Text Here    

    Así es cómo puedes hacerlo con algunas tags simples y espacios sin interrupciones.

    Usaría una imagen y lo llamaría un día, pero esto pareció funcionar para mí:

    CSS

      fieldset { border-right: 0px; border-left: 0px; border-bottom: 0px; width: 200px; } legend { margin: 0 25%; } 

    HTML

     
    My Text Here

    Esa es la única forma en que pude descubrir cómo hacerlo con CSS. Tenga en cuenta que el ancho es fijo. Una vez más, yo no haría esto yo mismo.

    CSS Cat no aprueba

    Esto es lo que estoy usando en el sitio de un cliente: http://jsfiddle.net/TPgE4/

    Pros:

    • No se necesitan imágenes: se renderiza al instante
    • Utiliza relleno para controlar el espacio en ambos lados del texto
    • El texto puede alinearse en el centro, o alinearse a la izquierda / a la derecha: simplemente agregue, por ejemplo, margin-left: 8px o margin-right: 8px definición de estilo de h2 span margin-right: 8px en h2 span para que se vea bien

    Contras:

    • Requiere el uso de una etiqueta adicional como ... dentro de la etiqueta de título
    • El texto debe caber en una línea para una buena apariencia
    • El color de fondo en el elemento debe coincidir con el color de fondo circundante, por lo que si tiene una imagen de fondo no sólida, un degradado o un patrón, no coincidirá perfectamente

    Algo tarde para la fiesta, pero esta es mi solución: https://jsfiddle.net/g43pt908/

    No requiere imágenes, y no depende de un color de fondo.

    HTML

     
    Some text

    CSS

     .hr-text { border-top: 1px solid #999; text-align: center; background-color: inherit; } .hr-text span { display: inline-block; position: relative; height: 14px; top: -12px; font-size: 14px; font-style: italic; color: #666; background-color: inherit; padding: 0 10px; } 

    Con FlexBox soportado por todos los navegadores más recientes, y siendo cinco años desde que el autor mencionó el requisito de IE8, quería divertirme construyendo una nueva solución usando eso.

    Una variedad de ejemplos cada vez más complicado:

    https://jsfiddle.net/0mL79b4h/1/

    https://jsfiddle.net/0mL79b4h/2/

    CSS

     div { display: flex; align-items: center; } div:before, div:after { border: 1px solid #000000; border-radius: 2px; height: 2px; display: block; content: ""; flex: 1; width: 100%; } h1 { text-align: center; margin: 8px; } 

    HTML

     

    Example Text

    Multi-Line
    Example Text

    Pros:

    • Utiliza flexbox!
    • Súper simple HTML.
    • Los lados izquierdo y derecho se pueden ajustar para la asimetría.
    • Cero problemas de fondo, sin heredar colores, etc.
    • Ancho de fluido
    • Soporte multilínea
    • Izquierda / Centro / Derecha / Alineación personalizada: simplemente ajuste la propiedad flex por separado para los elementos antes y después, los números más altos le dedicarán más espacio a ese lado. Quite uno completamente hacia la izquierda o la derecha, alinéelo.
    • Efectos interesantes al jugar con el estilo de borde (de hecho elegí un borde redondo en este ejemplo). Establezca la altura en 0px y use borde superior en lugar de una línea genérica.

    Contras:

    • Utiliza flexbox Llámame flojo, pero no construí ninguna compatibilidad con versiones anteriores en este ejemplo, por lo que parecerá extraño en un navegador que admita elementos psuedo pero no admita flexbox, aunque la última vez que lo revisé fue Chrome (Firefox, etc.). que se actualizan automáticamente de todos modos. Puede que quieras usar un poco de Modernizr.

    No estoy seguro si esto se adaptaría a tu necesidad …

     h1:before, h1:after { content: " ------------- "; } 

    Esto no parece una muy buena respuesta, pero lo estoy publicando de todos modos.

    Ver: http://jsfiddle.net/rFmQg/

     

    Centered Header Text

    h2 { background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center; text-align: center } h2 span { background: #fff; padding: 0 9px }

    No me gusta porque:

    • Tienes que usar una imagen.
    • Esta. (solo funciona si los fondos coinciden)
     body { padding-top: 100px; } div.parent { text-align: center; border-top: 1px solid #ccc; } div.parent div { display: inline-block; margin-top: -0.8em; padding: 0 0.5em; background: #fff; } 
      
    My Text Here

    Esta es una solución de ancho de fluido que coincide con su diseño y debería estar bien en IE7 (aunque admitiré que no lo verifiqué). Hay un par de inconvenientes:

    • Pierdes la semántica fieldset / legend.
    • No puede poner un fondo transparente en el texto.

    Si no necesita que sea de ancho de fluido, la solución de onteria_ es probablemente su mejor opción.