Direkt zum Inhalt springen
CSS-Tricks
  • Artikel
  • Notizen
  • Links
  • Anleitungen
  • Almanach
  • Zufall
Suche
Print-Stylesheet
Code Snippets → CSS → URL nach Links drucken

URL nach Links drucken

Avatar of Chris Coyier
Chris Coyier am 15. August 2019
@media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Montana Flynn
    Permalink zu Kommentar# 4. September 2009

    Einfach fantastisch. Ein tolles Tutorial wäre alles über Druck-Stylesheets! Danke Chris!

    Antworten
    • abajan
      Permalink zu Kommentar# 13. September 2009

      Nun, Chris hat bereits ein Video-Tutorial zu Print-Stylesheets, das ziemlich gut ist.

  2. Ahmad Awais
    Permalink zu Kommentar# 9. August 2011

    Eine Demo wäre hier viel praktischer gewesen!

    Antworten
    • Alex
      Permalink zu Kommentar# 14. Oktober 2019

      Demo http://www.cssdesk.com/tZ6LY

  3. Viv
    Permalink zu Kommentar# 12. März 2013

    Demo kann hier gefunden werden
    http://jsfiddle.net/duemF/

    Es ist auch möglich, den Link schwarz zu färben, indem man color: #000 hinzufügt, aber text-decoration: none; scheint nicht zu funktionieren.

    Antworten
  4. Thomas
    Permalink zu Kommentar# 2. Mai 2013

    Wenn Sie sich für die Browserunterstützung interessieren, sehen Sie sich die CSS-Tricks-Einträge für
    Pseudo-Elemente (:after)
    und
    CSS-Inhaltseigenschaft

    Antworten
  5. Joobleblob
    Permalink zu Kommentar# 8. Juli 2014

    Ich nehme nicht an, dass irgendjemand eine gute Methode dafür kennt, aber > *„mailto:“* von ausgewählten Links ausschließt?

    Antworten
    • Vernon Fowler
      Permalink zu Kommentar# 30. Juli 2015

      Sie könnten Attributselektoren verwenden, um *mailto:* Links herauszufiltern, indem Sie einen regulären Ausdruck verwenden, der mit href beginnend mit *http* übereinstimmt – siehe https://css-tricks.de/attribute-selectors/ Dies würde auch Links mit dem https-Protokoll einschließen.

      So etwas wie das Folgende, aber fügen Sie **:after** an der richtigen Stelle ein.

      @media print{
       a[href^="http"] { /* do stuff */ }
      }
      
    • bpj
      Permalink zu Kommentar# 11. März 2017

      Es ist im Allgemeinen nützlich, den Links, die so angezeigt werden sollen, eine Klasse zu geben – ich nenne sie normalerweise .external – damit *mailto:* Links und interne Links (*href="#foo"*) nicht im Druck erscheinen.

      Übrigens sollten Sie nach der schließenden Klammer keinen Whitespace einfügen. Was ist, wenn sie direkt vor einem Satzzeichen steht!?

  6. Patrick H. Lauke
    Permalink zu Kommentar# 18. Mai 2018

    Zufällig: Wenn Sie aus irgendeinem Grund Links (mit einem entsprechenden ARIA-Rollenattribut) als Buttons oder Ähnliches verwenden, möchten Sie diese möglicherweise auch vom Drucken ihrer href ausschließen – so etwas wie

    a[href]:not([role]):after,
    a[href][role=”link”]:after { content:” (” attr(href) “) “; }

    Antworten
  7. Dean
    Permalink zu Kommentar# 4. Juni 2018

    Genial. Genau das, was ich gesucht habe, und ich habe es auf einer meiner Lieblingsseiten gefunden.

    Antworten
  8. Isaac Lloyd
    Permalink zu Kommentar# 17. Oktober 2019

    Das ist genial!

    Antworten
  9. J. Hogue
    Permalink zu Kommentar# 11. November 2020

    Gibt es eine Möglichkeit, die gesamte URL anzeigen zu lassen? Ich verstecke zum Beispiel alle Links in der Navigation, außer denen mit einer „current“-Klasse, und zeige die URL daneben als eine Art Breadcrumb in der Druckversion einer Seite an. Ich erhalte Seitentitel (/about-us), möchte aber Seitentitel (https://site.com/about-us) sehen. Ist das möglich?

    Antworten
    • Geoff Graham
      Permalink zu Kommentar# 11. November 2020

      Sie könnten die TLD zur content -Eigenschaft hinzufügen

      a::after{
        content: " (https://www.site.com"attr(href) ") ";
      }

      Das funktioniert natürlich nur, solange die Domain überall konsistent ist.

Hinterlasse eine Antwort Antwort abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

CSS-Tricks wird unterstützt von DigitalOcean.

Bleiben Sie auf dem Laufenden über Web-Entwicklung

mit unserem handverlesenen Newsletter

DigitalOcean
  • Über DO
  • Cloudways
  • Rechtliches
  • Holen Sie sich kostenloses Guthaben!
CSS-Tricks
  • Schreiben Sie für uns!
  • Werben Sie bei uns
  • Kontaktieren Sie uns
Soziales
  • RSS-Feeds
  • CodePen
  • Mastodon
  • X
Nach oben

© .