Стиль текста и :before/:after в FF

Неа. :before и :after работают как будто они внутри контента элемента. Можно решить задачу на Java Script.

tag:before { content: "<tag>"; }
tag:after { content: "</tag>"; }

Не взлетит

Не нужно пытаться решать задачи разметки средствами стиля. Да и не выйдет в данном случае.

Ты уверен, что в content сможешь запихать HTML и это будет работать? Или это так и задумано?

А проверить? Это работает.

:before и :after работают как будто они внутри контента элемента.

В том-то и дело, что не совсем. Я могу сделать их другого цвета, могу сделать им отдельный :hover - и они будут менять цвет при наведении мыши на элемент. А вот стиль текста почему-то не получается сделать отдельный.

Это работает в том смысле, что текст экранируется.

Не, ты не понял. Почитай спеку:

text-decoration

This property describes decorations that are added to the text of an element using the element's color. When specified on an inline element, it affects all the boxes generated by that element; for all other elements, the decorations are propagated to an anonymous inline box that wraps all the in-flow inline children of the element, and to any block-level in-flow descendants. It is not, however, further propagated to floating and absolutely positioned descendants, nor to the contents of 'inline-table' and 'inline-block' descendants.

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped. If an element contains no text, user agents must refrain from rendering these text decorations on the element. For example, images will not be underlined.

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor. In determining the position of and thickness of text decoration lines, user agents may consider the font sizes of and dominant baselines of descendants, but must use the same baseline and thickness on each line. Relatively positioning a descendant moves all text decorations affecting it along with the descendant's text; it does not affect calculation of the decoration's initial position on that line.

Уже взлетело, за исключением небольших неудобств с перечёркиванием.

Где там ancestor и descendants? Рассмотрим один-единственный тег с текстом внутри. Как вышеизложенное применимо к нему?

Это работает в том смысле, что текст экранируется.

Ну разумеется. Оно мне и надо - чтобы визуально было видно, что за теги там.

Это xml-редактор, если чё. Один из его режимов.

Мне ещё и before/after копипастить? :)

12.1 The :before and :after pseudo-elements

The formatting objects (e.g., boxes) generated by an element include generated content. So, for example, changing the above style sheet to:

p.note:before { content: "Note: " }
p.note        { border: solid green }

would cause a solid green border to be rendered around the entire paragraph, including the initial string.

The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.

The :before and :after pseudo-elements elements interact with other boxes, such as run-in boxes, as if they were real elements inserted just inside their associated element.

Там не говорится, что inheritable properties нельзя переопределить для них.

Не читай & сразу отвечай что ли? Стиль текста и :before/:after в FF (комментарий)

+

as if they were real elements inserted just inside their associated element

Это тебе и дают. Объясняю на пальцах. p:before { content: «x» } это, условно говоря такое хитрое

<p><span>x</span> (тут обычное содержимое параграфа)</p>

Только «спана» (точнее там анонимный бокс) ты не видишь, как суслика, а он есть.

Ну так объясни мне, ради аллаха и его семнадцати пророков, какого чёрта одни свойства переопределить можно, а другие нельзя? Твой span я запросто могу отстилизовать независимо от родителя, просто переопределив свойства.

А вот для :before, например, color: работает, а text-decoration: - почему-то нет.

Oops, а ведь для p/span тоже не получается сделать отдельные text-decoration. Похоже, разработчики FF просто не осилили…

Да ёлки-палки, там же выше подчёркнуто. text-decoration особенный. Это свойство самого стиля.

Представь, что у тебя несколько слоёв. На верхнем ты начертил эту зачёркивающую линию, а на нижнем браузерные эльфы кричат «не надо нас зачёркивать, а-а-а». Но смотришь то ты сверху и верхний слой от этого никуда не пропал — ты видишь линию.

Ты чем читал текст выше? Перечитай.

Ну и в дополнение, это свойство не наследуется. Должно наводить на мысли.

Этот text-decoration даже z-index презирает. Пичалько.

Hurrah! I did it!11

Добавление свойства display: inline-block к span решает проблему.

Reference: http://stackoverflow.com/questions/5434819/cannot-undo-text-decoration-for-ch...

И с :before/:after тоже работает. Помечаю тему как решённую. Всем спасибо.

А во всех браузерах посмотрел? А то там по ссылке написано…

Хорошо, что меня интересует только FF.

Это не «хорошо», по ссылке написано, что Firefox неправ. И если это так, то когда-то это пофиксят. Ну, ты понял.

Написано, что FF3.6/4 неправ, когда рисует декорации для элемента с display: inline-block. И это уже починили.