Можно ли быть нацелены <на br/> с CSS?

BR генерирует перенос строки, и это только перенос строки. Поскольку у этого элемента нет содержимого, есть только несколько стилей, которые имеет смысл применять к нему, например clear или position . Вы можете установить границу BR , но вы не увидите ее, поскольку она не имеет визуального измерения.

Если вам нравится визуально разделить два предложения, то вы, вероятно, захотите использовать горизонтальную линейка , которая предназначена для этой цели. Поскольку вы не можете изменить разметку, я боюсь, что используя только CSS, вы не сможете этого добиться.

Кажется, это уже обсуждалось на других форумах. Выдержка из Re: Установка высоты элемента BR с помощью CSS :

[T] его приводит к несколько странному статусу для BR в том, что, с одной стороны, это не рассматривается как нормальный элемент, но вместо этого как экземпляр \ A в сгенерированный контент, но с другой рука это рассматривается как нормальный элемент в этом (ограниченное подмножество) Свойства CSS разрешены на это.

Я также нашел разъяснение в спецификации CSS 1 (ни одна из спецификаций более высокого уровня не упоминает об этом):

Текущие свойства и значения CSS1 не могут описывать поведение элемент BR. В HTML "BR" элемент определяет разрыв строки между слова. Фактически, элемент заменен разрывом строки. Будущее версии CSS могут обрабатывать добавленные и заменен контент, но на основе CSS1 форматеры должны обрабатывать 'BR' специально.

Тесты Гранта Вагнера показывают, что нет способа стилизовать BR , как это можно сделать с другими элементами. В Интернете также есть сайт, на котором вы можете проверить результаты в своем браузере .

Обновление

pelms провело некоторые дополнительные исследования, и указал , что IE8 (на Win7) а Chrome 2 / Safari 4b позволяет несколько стилизовать BR . И действительно, я проверил демонстрационную страницу IE с движком IE8 IE Net Renderer , и она сработала.

Обновление 2 c69 провел дополнительные исследования, и оказалось, что вы можете стилизовать маркер для br довольно сильно (хотя и не в кроссбраузерности), но это не поможет влияют на сам разрыв строки, потому что кажется, что он принадлежит родительскому контейнеру.

BR - это встроенный элемент, а не блочный.

Итак, вам нужно:

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

В противном случае браузеры, которые немного разборчивы в таких вещах, откажутся применять границы к вашим Элементы BR, поскольку встроенные элементы не имеют границ, отступов или полей.

Это будет работать, но только в IE. Тестировал в IE8.

br {

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

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

renders as below in IE8... not a lot of use in just one browser though.

(N.B. I'm using IE 8.0.7100 (on Win7 RC) if that makes any difference)

Also,

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

or,

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

br { content: "" }

gives a dashed line in Chrome 2 / Safari 4b but loses the line break which (unless anyone can come up with a way to reintroduce that) makes it less than useless.

e.g.
IE8 test, Chrome/Safari test and another

Я знаю, что вы не можете редактировать HTML, но если вы можете изменить CSS, можете ли вы добавить javascript?

если да, вы можете включить jquery, тогда вы можете сделать

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

Для будущих посетителей, которые могли пропустить мои комментарии:

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

не работает.

Он был протестирован в IE 6, 7 и 8, Firefox 2, 3 и 3.5B4, Safari 3 и 4 для Windows, Opera 9.6 и 10 (альфа) и Google Chrome (версия 2), и он не работал ни в одном из них. Если в какой-то момент в будущем кто-то найдет браузер, который поддерживает границу в элементе
, пожалуйста, обновите этот список.

Также обратите внимание, что я пробовал ряд других вещей :

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);
}

Из них,

Мои собственные тесты убедительно показывают, что теги br не подходят для css.

Но если вы можете добавить стиль, вы, вероятно, также можете добавить тег скрипта в заголовок страницы ? Ссылка на внешний .js , который делает что-то вроде этого:

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 );
    }
}

Короче говоря, это не оптимально, но вот мое решение.

Почему бы просто не использовать Тег HR? Он создан именно для того, что вы хотите. Это похоже на попытку приготовить вилку для супа, когда на столе прямо перед вами стоит ложка.