hacer que un hr atraviese un texto

[DarkMaster9]

hola a todos me lo que me gustaría
hacer es esto
ejemplo

Código HTML:

<hr>hola

me gustaría que pasara esto
----------------------------hola------------------------------
pero no
pasa esto

hola
___________________________________

y si hago esto

Código HTML:

<hr width='50%'>hola

pasa esto

hola
_____________


si hago esto

Código HTML:

hola<hr width='50%' align='center'> 

pasa esto
hola
_____________________

me gustaria que me puedan ayudar
lo que kiero hacer es lo siguiente como ya lo dije

----------------------------hola---------------------------------
que la linea pasa atraves del texto
espero que me explique con un codigo css

Código CSS:

#hr {
  margin-left:15px;
}
 

nada funciona :(

[alexk]

No entiendo bien lo que quieres lograr pero bueno es algo asi... lo que se me ocurre...
sino seria usar la etiqueta <del> y llenarlo de espacios en blanco XD

Código CSS:

p{ 
border-bottom: 1px solid #000000;
height: 0;
line-height: 28px;
margin:0 0 15px;
padding-bottom: 15px;
text-align: center;
}
 

<p>Hola mundo</p>

Si quieres que el texto sea legible encierralo dentro de un span y juego con los z-index y fondo y color de letra chao...

[valtimore1]

el hr crea una linea horizontal que no tiene la propiedad de ser cortada en un punto escojido hasta donde se, para añadirle texto, pero es muy facil solucionarlo.

Lo que necesitas es ajustar las dimensiones del hr en un punto que intersecte entre el texto que quieres añadir y otro hr que inicie.

Código HTML:

<hr width='50%'>hola</hr><hr width='50%'></hr>
 

En el caso de que pegue un salto de linea, podrias intentar metiendolo en un contenedor primero.

sALUDOS.

[DarkMaster9]

Iniciado por alexk

no entiendo bien lo que quieres lograr pero bueno es algo asi... Lo que se me ocurre...
Sino seria usar la etiqueta <del> y llenarlo de espacios en blanco xd

Código css:

p{ 
border-bottom: 1px solid #000000;
height: 0;
line-height: 28px;
margin:0 0 15px;
padding-bottom: 15px;
text-align: Center;
}
 

<p>hola mundo</p>

si quieres que el texto sea legible encierralo dentro de un span y juego con los z-index y fondo y color de letra chao...

genial
ese si funcionoo
gracias man