Помогите с CSS: хочу сделать многострочный :before

Не помню, есть ли контент у br, но Firefox всё равно content не умеет на элементы, только на before/after. Опенсёрч, он такой.

Как ты предлагаешь CSS считать сколько нужно поставить твоих символов? Прекращай страдать ерундой и меняй br на <span class=«l»>содержимое строки</span> с .l { display: block; }

И уж туда-то напихай чего угодно.

Причём тут многострочный ::before (на самом деле он пишется именно так, т.к. это псевдоэлемент) также осталось непонятным.

Прекращай страдать ерундой и меняй br на <span class=«l»>содержимое строки</span>

Так br ставлю не я, а макском. А переделывать что-либо я не хочу.

.quote p {
    text-indent: -1em;
    margin-left: 1em;
}

Есть куда улучшить, но хоть что-то.

Спасибо, добавил. Но хочется именно добавить дополнительных '>' для каждой строчки.

You should use JS

CSS умеет повторять только картинки. Придется добавить либо gt.png, либо немного яваскрипта.

А обычным CSS'ом никак?

Очень жаль.

Можно и гвозди микроскопом забивать и бактерий молотком изучать, но лучше даже не пробовать.

Всего-то надо по массиву нужных элементов циклом пробежать и в innerHTML добавить эту галку спереди. Кода на полторы строчки.

Да я догадываюсь, что это несложно. Но я пока не буду скрипты писать.
Потом ещё превьюхи нужно будет сделать.

Ну вот можно так замутить (отключенные стили закоментированы). Только картинку подходящую для «>» выбрать..

.quote p {
    /* text-indent: -1em; */
    /* margin-left: 1em; */
    background: url(http://www.aakinternational.com/images/greater-than-sign.png);
    background-repeat: repeat-y;
    padding-left: 1em;
    background-position: -3px -1px;
}

.quote p:before {
	/* content: "> "; */
}

Не, плохой вариант. А если пользователь размер шрифта поменяет? Всё поедет.

Ну мой первый вариант тоже, думаю, может расползаться при каких-то конфигурациях шрифтов.

Если будет времечко, я тебе накидаю модный скрипт для квотов.

Держи. Вот это в самом начале засовывается (в head) и оно тебе во всех цитатках дорисует «>»

http://jsfiddle.net/Rr3ZW/1/

А если подгонять через background-size заданный в каких-то относительных единицах?

Вижу, CYB3R, что там есть проблемки. Видел твой example. Надо подумать над regexp. :)

В джаваскрипте я не силён, не совсем понял, как адаптировать твой код под мой случай:

<div class="quote"><p>line one<br>line two<br></p></div>

node.getElementsByTagName("p")[0].innerHTML = '&gt; ' + node.innerHTML.replace(/(<br[^>]*>)(.*)/gi, '$1&gt; $2');

А, до меня дошло, где я тупанул. Надо

node.getElementsByTagName("p")[0].innerHTML = '&gt; ' + node.getElementsByTagName("p")[0].innerHTML.replace(/(<br[^>]*>)(.*)/gi, '$1&gt; $2');

Я сейчас делаю решение без regexp. Вообще очень чистое. Маякну как будет.

Спасибо!

http://jsfiddle.net/Rr3ZW/10/

Протестировал на Chrome, Firefox, Safari, IE9+

Для IE9+ нужно подключить специальный костыль для MutationObserver (он там вначале минифицированный стоит). Если не нужен IE9, IE10 — смело убирай.

https://raw.githubusercontent.com/megawac/MutationObserver.js/master/dist/mut...

Что-то у меня так и не получилось запустить этот скрипт у себя.
Вот тут у меня тестовая версия. Вроде бы правильно его запускаю при загрузке страницы. В отладчике видно, что строка 41 выполняется, а строка 42 — нет.

Ок, я пока в дороге - попозже гляну.

Не-а, как раз неправильно запускаешь. :)

Приницип тут другой. window.onload — это слишком поздно.

Ты должен в самом начале поставить «цербера», который при добавлении в DOM-дерево элементов <p class=«quote»> будет их соответствующим образом обрабатывать.

Поэтому, если у тебя сейчас так:

function transformQuotes() {
// ... code ...
}

window.onload = function() {
    transformQuotes();
};

То надо либо так:

function transformQuotes() {
}

transformQuotes(); // вызывай сразу

Либо вызови безымянную функцию на ходу как у меня в примере на JSFiddle (так что зря ты переделал). Это называется «immediate invocation»:

(function () {
// тело функции transformQuotes()
}());

P. S. Убирай те стили с text-indent, padding, :before. В рамках этого решения они не нужны и добавляют лишний «>».

Спасибо.
А впервые увидел immediate invocation, по конструкции понял, что он запускает функцию, но подумал, что это что-то, чтобы на JSFiddle работало.
Я вообще думал, что выполнять JS до загрузки нехорошо.

Это как раз тот случай, что называется, из исключений.

Таким образом ты ловишь элементы прямо на моменте вставления в DOM дерево — это самая «горячая» замена из всех доступных на сегодняшний день!

P.S. Возможно, еще есть смысл делать нодам «display: none» перед модификациями, но надо брать читать матчасть. Теоретически, мы их ловим до рендеринга, хотя могу ошибаться, и рендеринг 1 раз все равно происходит.

Скрипт довольно маленький, вряд ли сильно съест перформанс. Хотя можешь его и «заинлайнить» при крайней необходимости.

псевдоклассы нерулябельны. читай какой-нибудь хтмлбук, и плачь.

запили через жабоскрипт, иного пути у тебя нет.

Все равно не все предусмотрел: http://jsfiddle.net/Rr3ZW/11/

Вот тег <B> внтури — его задело. Надо обход дерева исключительно по <BR> сделать... Еще та задачка))) Но, думаю, все реально. :)

Патч на ЛОР будет быстрее.

Да можно и так пока оставить.

Цитаты с жирным текстом
встречаются нечасто