SOFTELメモ

</> 技術者募集

【CSS】印刷するとリンクの後ろにURLが勝手に表示される

問題

あるWebページを印刷すると、リンクの後ろにURLが表示されました。

ぜんぜん見た目どおりでなくて、ちょっと困るのですが。。。

screenshot-20130106 印刷すると→ print-css-href

答え

以下のようなCSSが組み込まれていると、a要素でhref属性がある場合、印刷時に、要素の後ろにリンク先が挿入されます。

@media print {
/* 省略 */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
/* 省略 */
}

最近の Twitter Bootstrap などがそうなっているようです。

どうしても困る場合は、CSSの該当部分を削除してしまえばよいです。

関連するメモ

コメント(2)

印刷プレビューで見るとリンクアドレスが表示している・・・CSS | ウェブ制作の忘備録 2015年2月1日 17:53

[…] 調べてみると【CSS】印刷するとリンクの後ろにURLが勝手に表示される のサイトを参考にさせてもらうと、 […]

bootstrap3で制作したサイトを印刷するとリンクの後にURLが出てしまう問題。 2015年3月23日 16:58

[…] 引用元: 【CSS】印刷するとリンクの後ろにURLが勝手に表示される at softelメモ. […]