3

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

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

结果：

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

想要这个：

给我发邮件

(你好@email.com)

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

4

3 回答 3

3

试试这个 -

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

演示

于 2012-10-15T05:37:12.567 回答
1

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

于 2012-10-15T05:32:18.657 回答
1

如其他答案所示，有多种方法可以使:after伪元素从新行开始。但是您问题中的示例表明所需的渲染是

给我发邮件

(你好@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 替换为您正在使用的 line-height 值。

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

于 2012-10-15T07:08:25.933 回答