Распечатать CSS URL в новой строке

Question

Для стилей печати я в настоящее время печатаю URL после текста. Возможно ли, чтобы оно появилось на следующей строке, а не рядом с текстом? Это то, что я до сих пор.

a:after {
  content:" (" attr(href) ")";
}

Результат:

Напишите мне ([e-mail])

Хотите это вместо этого:

Напишите мне

([e-mail])

Пример: http://jsfiddle.net/qesRk/

Answer 1

Попробуй это -

a:after {
    font-style: italic;
    content: "\A and some text after."; white-space:pre;
}

демонстрация

Answer 2

Существуют различные способы сделать :after псевдоэлемент начинается с новой строки, как показано в других ответах. Но пример в вашем вопросе говорит, что желаемый рендеринг

Напишите мне

([e-mail])

Это не может быть достигнуто с помощью только CSS, если цель состоит в том, чтобы адрес из href атрибут ссылки. Причина в том, что работающий href значение должно начинаться с mailto:и вы не можете ничего опустить в значении атрибута при использовании таких конструкций, как attr(href), То, что вы можете достичь, это

Напишите мне

(Электронная почта:[e-mail])

Для этого дана разметка <a href="mailto:[e-mail]">Email me</a>, вы бы использовали

a:after {
        content: " (" attr(href) ")";
        display: block;
        margin-top: 1.2em;
}

предполагая, что вы тоже хотите пустую строку, как в вашем примере. Замените 1.2 на значение высоты строки, которое вы используете.

PS Это звучит излишне сложно в любом случае. Использование только адреса электронной почты в контенте, опционально a href элемент, будет достаточно, как на экране, так и на печати. (При печати вы обычно хотели бы подавить подчеркивание ссылок, но это общая проблема.) Если вы задумывались о том, чтобы запретить сборщикам адресов электронной почты получать адреса из содержимого, помещение адреса в атрибут не очень помогает (они легко обрабатываются комбайнами).

Answer 3

Вы могли бы display: block; это, как на этом JSFiddle