¿Puedes apuntar con css?

¿Es posible segmentar la etiqueta de ruptura de línea
con CSS?

Me gustaría tener una línea punteada de 1px cada vez que haya un salto de línea. Estoy personalizando un sitio con mi propio CSS y no puedo cambiar el conjunto de HTML; de lo contrario, utilizaría de otra manera.

No creo que sea posible, pero tal vez haya una forma en que alguien lo sepa.

BR genera un salto de línea y es solo un salto de línea. Como este elemento no tiene contenido, existen pocos estilos que tengan sentido para aplicarlo, como clear o position . Puedes establecer el borde del BR pero no lo verás ya que no tiene una dimensión visual.

Si le gusta separar visualmente dos oraciones, entonces probablemente quiera usar la regla horizontal que está destinada a este objective. Como no puede cambiar el marcado, me temo que al usar solo CSS no puede lograrlo.

Parece que ya ha sido discutido en otros foros. Extracto de Re: Configuración de la altura de un elemento BR utilizando CSS :

[T] su lleva a un estado algo extraño para BR en que, por un lado, no se trata como un elemento normal, sino como una instancia de \ A en el contenido generado, pero por otro lado se lo trata como un elemento normal en ese (un subconjunto limitado de) las propiedades CSS se permiten en él.

También encontré una aclaración en la especificación CSS 1 (ninguna especificación de nivel superior lo menciona):

Las propiedades y valores actuales de CSS1 no pueden describir el comportamiento del elemento ‘BR’. En HTML, el elemento ‘BR’ especifica un salto de línea entre palabras. En efecto, el elemento se reemplaza por un salto de línea. Las versiones futuras de CSS pueden manejar contenido agregado y reemplazado, pero los formateadores basados ​​en CSS1 deben tratar especialmente a ‘BR’.

Las pruebas de Grant Wagner muestran que no hay forma de BR estilo a BR como lo puede hacer con otros elementos. También hay un sitio en línea donde puede probar los resultados en su navegador .

Actualizar

pelms hizo algunas investigaciones adicionales, y señaló que IE8 (en Win7) y Chrome 2 / Safari 4b le permite un estilo de BR algo. Y, de hecho, revisé la página de demostración de IE con el motor IE8 de IE Net Renderer , y funcionó.

La actualización 2 c69 realizó algunas investigaciones adicionales, y resulta que se puede aplicar un estilo muy fuerte al marcador (aunque no al navegador cruzado), aunque esto no afectará al salto de línea, ya que parece pertenecer al contenedor padre.

Intenta lo siguiente, lo armé usando la Actualización 2 de otra respuesta con votos altos, y funcionó perfectamente para mí:

 br { content: "A" !important; display: block !important; margin-bottom: 1.5em !important; } 

Hay una buena razón por la que necesitaría diseñar una etiqueta
.

Cuando es parte del código, no desea (o no puede) cambiar y desea que este particular no se muestre.

 .xxx br {display:none} 

Puede ahorrarle mucho tiempo y, a veces, su día.

Para el beneficio de cualquier visitante futuro que pueda haber perdido mis comentarios:

 br { border-bottom:1px dashed black; } 

No funciona.

Ha sido probado en IE 6, 7 y 8, Firefox 2, 3 y 3.5B4, Safari 3 y 4 para Windows, Opera 9.6 y 10 (alfa) y Google Chrome (versión 2) y no funcionó en ninguna de ellos. Si en algún momento en el futuro alguien encuentra un navegador que admita un borde en un elemento
, no dude en actualizar esta lista.

También tenga en cuenta que probé varias otras cosas:

 br { border-bottom:1px dashed black; display:block; } br:before { /* and :after */ border-bottom:1px dashed black; /* content and display added as per porneL's comment */ content: ""; display: block; } br { /* and :before and :after */ content: url(a_dashed_line_image); } 

De ellos, el siguiente funciona en Opera 9.6 y 10 (alfa) (gracias porneL!):

 br:after { border-bottom:1px dashed black; content: ""; display: block; } 

No es muy útil cuando solo se admite en un navegador, pero siempre me parece interesante ver cómo diferentes navegadores implementan la especificación.

Sé que no puedes editar el HTML, pero si puedes modificar el CSS, ¿puedes agregar javascript?

si es así, puedes incluir jquery, entonces podrías hacer

  
 br { padding: 1px 8px; border-bottom: 1px dashed #000 } 

se representa como se muestra a continuación en IE8 … sin embargo, no es muy útil en un solo navegador.

IE 8 captura de pantalla

(Nota: estoy usando IE 8.0.7100 (en Win7 RC) si eso hace alguna diferencia)

También,

 br:after { content: "..." } br { content: "" }` 

o,

 br:after { border: 1px none black; border-bottom-style: dashed; content: ""; padding: 0 6px 0; } 

br { content: "" }

da una línea discontinua en Chrome 2 / Safari 4b pero pierde el salto de línea que (a menos que alguien pueda encontrar una forma de reintroducir eso) lo hace menos que inútil.

p.ej
Prueba de IE8 , prueba de Chrome / Safari y otra

Mis propias pruebas demuestran de manera concluyente que a las tags br no les gusta ser el objective de css.

Pero si puede agregar estilo, ¿probablemente también puede agregar una etiqueta de scrip al encabezado de la página? Enlace a un .js externo que hace algo como esto:

 function replaceLineBreaksWithHorizontalRulesInElement( element ) { elems = element.getElementsByTagName( 'br' ); for ( var i = 0; i < elems.length; i ++ ) { br = elems.item( i ); hr = document.createElement( 'hr' ); br.parentNode.replaceChild( hr, br ); } } 

En resumen, no es óptimo, pero esta es mi solución.

esto parece resolver el problema:

    

BR es un elemento en línea, no un elemento de bloque.

Así que tú necesitas:

  br.Underline{ border-bottom:1px dashed black; display: block; } 

De lo contrario, los navegadores que son un poco más exigentes con estas cosas se negarán a aplicar bordes a sus elementos BR, ya que los elementos en línea no tienen bordes, relleno o márgenes.

Esto funcionará, pero solo en IE. Lo probé en IE8.

 br { border-bottom: 1px dashed #000000; background-color: #ffffff; display: block; } 

Coloqué una etiqueta
en una etiqueta y pude usar display:none; en para controlar cuándo no usar la etiqueta
usando Media Queries.

una vieja pregunta, pero esta es una solución bastante limpia y ordenada, podría ser utilizada por personas que aún se preguntan si es posible :):

 br{ content: '.'; display: inline-block; width: 100%; border-bottom: 1px dashed black; } 

Esto se prueba y funciona correctamente en Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 e IE 11.48.17134.0, para darle un estilo a un BR para hacer un salto de línea “más grande” (es decir, con un poco de espacio adicional entre las líneas):

 br.big {line-height:175%;vertical-align:top;} 

Aquí hay una demostración:

 br.big {line-height:175%;vertical-align:top;} 
 

This is a paragraph which demonstrates the difference between a line-break which occurs when the text exceeds the max-width, and a line-break forced by a BR tag here:
and a line break forced by a "bigger" BR tag here:
This is the next line after the bigger BR tag (but still part of the same paragraph).

And this is another paragraph, entirely.

¿Por qué no usar la etiqueta de recursos humanos? Está hecho exactamente para lo que quieres. Es como intentar hacer un tenedor para comer sopa cuando hay una cuchara frente a ti en la mesa.