¿Puedes apuntar <br /> con css?

¿Es posible apuntar a la <br/>etiqueta de salto de línea con CSS?

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

No creo que sea posible, pero tal vez hay una manera de que alguien sepa.

BRgenera un salto de línea y solo es un salto de línea. Como este elemento no tiene contenido, solo hay unos pocos estilos que tienen sentido para aplicarlo, como clearo position. Puede establecer BRel borde pero no lo verá ya que no tiene dimensión visual.

Si desea separar visualmente dos oraciones, entonces probablemente quiera usar la regla horizontal que está destinada a este objetivo. Dado que no puede cambiar el marcado, me temo que usando solo CSS no puede lograr esto.

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

[T] esto lleva a un estado un tanto extraño para BR porque, 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 trata como un elemento normal en el que se permite (un subconjunto limitado de) propiedades CSS.

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 peinar BRcomo se puede hacer con otros elementos. También hay un sitio en línea donde puede probar los resultados en su navegador .

Actualizar

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

Actualización 2 c69 hizo algunas investigaciones adicionales, y resulta que se puede peinar el marcador para brmuy fuertemente (aunque, no a través del navegador), sin embargo, esto no afectará a la ruptura del verso en sí, ya que parecen pertenecer al contenedor principal.

Intente lo siguiente, lo armé usando la Actualización 2 de otra respuesta con altos votos, 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 <br>etiqueta.

Cuando forma parte del código, no desea (o no puede) cambiar y desea que este en particular <br>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 haya 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 ninguno de ellos. Si en algún momento en el futuro alguien encuentra un navegador que admite un borde en un<br> elemento, no dude en actualizar esta lista.

También tenga en cuenta que probé una serie de 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, lo 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í, puede incluir jquery, entonces podría hacer

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

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

Sin embargo, no se usa mucho en un solo navegador.

(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 inútil.

por ejemplo ,
prueba de IE8 , prueba de Chrome / Safari y otra

Mis propias pruebas muestran de manera concluyente que a las bretiquetas no les gusta ser objetivo de CSS.

Pero si puede agregar estilo, ¿entonces probablemente también pueda agregar una etiqueta de scrip al encabezado de la página? Enlace a un externo .jsque 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 aquí está mi solución.

Esto parece resolver el problema:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

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 los elementos BR, ya que los elementos en línea no tienen bordes, relleno o márgenes.

ACTUALIZADO 13/09/2019:

El propósito de diseñar la <br>etiqueta de esta manera es hacer un salto de línea "más grande" (es decir, con un poco de espacio extra entre las líneas).

La clase "oldbig" (a continuación) se probó y funcionó 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 estilo. Desafortunadamente, se rompió en Chrome versión 76 y sus derivados (alrededor de agosto de 2019). El síntoma es que ya no se muestra el espacio extra entre líneas.

La clase "newbig" se ha probado y funciona correctamente en las versiones actuales de Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave y Palemoon:

br.oldbig {line-height:190%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

Aquí hay una demostración:

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

<p style="max-width:20em">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 &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Este es el resultado, que se muestra en Chrome v.76:

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

br {

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

Coloqué una <br>etiqueta en una <span>etiqueta y era capaz de usar display:none;en el <span>que el control cuando no utilizar la <br>etiqueta usando Consultas de medios.

vieja pregunta, pero esta es una solución bastante ordenada y limpia, podría usarse para personas que todavía se preguntan si es posible :):

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

con esta solución, también puede eliminar BRs en sitios web (solo configure el ancho en 0px)

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