Question

对于打印样式，我目前正在打印文本后的URL。是否可以让它出现在下一行而不是文本旁边？这是我到目前为止所做的。

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

结果：

给我发电子邮件（hello@email.com）

请改为：

给我发电子邮件

（hello@email.com）

示例：http://jsfiddle.net/qesRk/

Answer 1

试试这个 -

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

Demo

Answer 2

你可以display: block;，就像这个JSFiddle

一样

Answer 3

有许多方法可以使:after伪元素在新行上开始，如其他答案所示。但是你问题中的例子说所需的渲染是

给我发电子邮件

（hello@email.com）

如果目的是来自链接的href属性的地址，那么仅使用CSS无法实现。原因是工作href值必须以mailto:开头，并且在使用attr(href)等构造时，不能省略属性值中的任何内容。你可以实现的是

给我发电子邮件

（的mailto：hello@email.com）

为此，给定标记<a href="mailto:hello@email.com">Email me</a>，您将使用

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

假设您也想要一个空行，如您的示例所示。将1.2替换为您正在使用的行高值。

P.S。无论如何，这听起来不必要地复杂。仅使用内容中的电子邮件地址（可选地包含在a href元素内）就足够了，无论是在屏幕上还是在打印时。（在打印时，您通常希望抑制链接的下划线，但这是一个普遍的问题。）如果您考虑阻止电子邮件地址收集者从内容中获取地址，将地址放入属性并没有多大帮助（他们很容易被收割机处理。）

在新行上打印CSS URL

3 个答案: