Einsatzelemente innerhalb eines <a> Tag nur mit CSS

-3

Ich habe einen Link:Einsatzelemente innerhalb eines <a> Tag nur mit CSS

<a href="#">Welcome to my webpage!</a>

Und ich würde, dass von weniger als 350px in Bildschirmen wie der Link wäre wie:

<a href="#"><i class="material-icons">face</i></a>

zu tun dass ich Medienabfrage verwende:

@media (max-width: 350px){ 
}

aber ich weiß nicht, wie man das Symbol hinein steckt , wenn es möglich ist.

Ein Ansatz, der mir in den Sinn kommt, ist die Erstellung von zwei <a> Tags für jeden Link, und zeigen/verstecken sie mit Media-Abfrage, aber ich suche nach einer besseren Möglichkeit, dies zu tun.

Ist es möglich, dies nur mit CSS zu tun?

Edit: Auf der Spitze meiner HTML Datei habe ich verwiesen die material-icons Bibliothek:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ich dachte, es angenommen werden könnte. Entschuldigung für jegliche Unannehmlichkeiten.

Vielen Dank im Voraus!

Quelle

2016-04-29 Francisco Romero

Zu den downvoters: mir bitte erklären, warum Sie die Frage oder Downvoting, wenn Sie denken, dass ich mehr etwas hinzufügen sollte. Vielen Dank! –

Css ist für Styling, nicht für die Manipulation von Dom. Sie können zwei Links platzieren und den zweiten ausblenden. Zeigen Sie dann die zweite und verbergen Sie die erste für die gewünschte Auflösung. – Gogol

Das Ausblenden/Anzeigen der Elemente bis zum Schwellenwert von 350 Pixeln ist der beste Weg, dies zu tun. Sie können dies vielleicht mit jQuery machen, aber es macht wenig Sinn, eine Reihe von Icons zum dom zu erstellen/entfernen, wann immer das passiert. –

Sie können das DOM nicht mit CSS bearbeiten, aber Sie können Elemente wie diese ein- und ausblenden.

a i{ 
 
    display:none; 
 
} 
 
@media (max-width: 350px){ 
 
    a span{ 
 
    display:none; 
 
    } 
 
    a i{ 
 
    display:block; 
 
    } 
 
}

<a href="#"><span>Welcome to my webpage!</span><i class="material-icons">face</i></a>

Quelle

2016-04-29 11:42:56 Wowsk

Ja, das ist der beste Weg, es tatsächlich zu tun. – Gogol

'Sie können HTML nicht manuell in CSS einfügen' Clarify please. – Gogol

Sie können das DOM nicht mit CSS bearbeiten, oder zumindest, dass ich weiß ... – Wowsk

<i class="material-icons">face</i> ist kein Symbol. Es ist ein kursiver Text.

Möglicherweise verfügen Sie über ein CSS, das diesem Element ein Symbol hinzufügt.

Verschieben Sie das CSS in Ihre Medienabfrage.

Quelle

2016-04-29 11:43:22 Quentin

Ja, ich habe den Link 'material-icons', auf den ich oben in meiner html-Datei verwiesen habe. Entschuldigung für jegliche Unannehmlichkeiten. –

-1

Verwenden Sie CSS content Eigenschaft, genau so.

https://jsfiddle.net/gqvrpxw5/

Quelle

2016-04-29 11:44:43 Aer0

Die Frage ist nach dem Hinzufügen von Elementen, nicht nach Text gefragt. – Quentin

@Quentin Sie können aber auch 'content' verwenden, um Bilder hinzuzufügen; sehe meine eigene Antwort. –

Eine Möglichkeit ist, mit dem <i> Symbol ganz zu verzichten und das Symbol Info im a::before auf kleinere Fenstern statt zu setzen.

@media (max-width: 350px){ 
 
    a::before{ 
 
    content:url(http://lorempixel.com/16/16); 
 
    } 
 
    a span {display:none} 
 
}

<a href="#"><span>Welcome to my webpage!</span></a>

Quelle

2016-04-29 11:47:52

Einsatzelemente innerhalb eines <a> Tag nur mit CSS

Antwort

Verwandte Themen