3

印刷スタイルについては、現在、テキストの後に URL を印刷しています。テキストの横ではなく、次の行に表示することは可能ですか? これは私がこれまでに持っているものです。

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

結果：

私にメールしてください（hello@email.com）

代わりにこれが欲しい：

メールを送ってください

(hello@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

このJSFiddledisplay: block;のように、あなたはそれをすることができました

于 2012-10-15T05:32:18.657 に答える
1

: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 を、使用している line-height 値に置き換えます。

PSとにかく、これは不必要に複雑に聞こえます。a href画面上でも印刷物でも、必要に応じて要素内にラップされた、コンテンツ内の電子メール アドレスのみを使用するだけで十分です。(印刷時には、通常、リンクの下線を抑制したいと思うでしょうが、それは一般的な問題です。) メール アドレス ハーベスターがコンテンツからアドレスを取得するのを防ぐことを考えている場合、アドレスを属性に入れてもあまり役に立ちません (彼らはハーベスターで簡単に処理できます)。

于 2012-10-15T07:08:25.933 に答える