Setzen Sie title/alt-Attribute in CSS :after { content: Bild }?

Habe ich Folgendes CSS hinzufügen ein PDF-Symbol, um einen beliebigen link, die links zu einer PDF-Datei:

a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);}

Ist es möglich, einige Titel und alt-Attribute auf diesem Bild? Ich würde es gerne so, dass der Benutzer in der Lage ist, den Mauszeiger über das Symbol und erhalten Sie text wie “Dieser Link führt zu einer .pdf-Datei". Die habe ich in der Regel nur getan, indem Sie title-Attribute, um es, aber kann nicht herausfinden, wenn ich tun kann, dass durch diese Methode.

  • Ja, aber in die HTML -, nicht in der CSS
  • Wie @pavium sagte, über HTML ODER Javascript (JQuery) etc...
InformationsquelleAutor SventoryMang | 2011-05-09
  1. 6

    Nein, content akzeptiert nur rohen text-und Bild-Daten, kein HTML.

    Müssen Sie JavaScript verwenden, um dynamisch hinzufügen von QuickInfos zu Ihrem vorhandenen HTML-Elemente.

    Als für das Symbol, können Sie ein Hintergrundbild und einige padding:

    a.pdf-link {
    padding-left: 2px;
    padding-right: 20px;
    background: url(../images/icon-pdf-link.gif) right center no-repeat;
}

    Wenn Sie brauchen, um insbesondere eine tooltip nur auf den icon, aber müssen Sie alles tun, was in JavaScript als die Kommentare sagen.

    InformationsquelleAutor BoltClock
  2. 1

    Können Sie dies, in diesen Tagen, mit CSS3.

    Laut https://www.w3.org/TR/css-content-3/#alt:

    1.2. Alternativer Text für die Rede

    Inhalte für visuelle Medien manchmal braucht man alternativen text für die Sprachausgabe. Die content-Eigenschaft so akzeptiert alternativer text angegeben werden, nach einem Schrägstrich (/) nach dem letzten . Wenn solche alternativen text zur Verfügung gestellt, es muss verwendet werden, für die Sprachausgabe statt.

    Dies ermöglicht es beispielsweise, die rein Dekorative text erstellte in Sprachausgabe (indem Sie die leere Zeichenfolge als alternativer text), und erlaubt es den Autoren mehr lesbar alternativen auf Bilder, Symbole oder text-kodierte Symbole.
    Hier die content-Eigenschaft ist ein Bild, so der alt-Wert ist erforderlich, um alternative text.

    .new::before {
  content: url(./img/star.png) / "New!";
    /* or a localized attribute from the DOM: attr("data-alt") */
}
    InformationsquelleAutor basiphobe
  3. 0

    Basierend auf der Antwort, die ich habe gerade Folgendes mit jQuery:

    $(".pdf-link").before("<img src='../images/icon-pdf-link.gif' title='This link is a pdf' />");
    InformationsquelleAutor SventoryMang
Schreibe einen Kommentar