Wie kann ich: vor der Eigenschaft ein Quadrat vor einer Spanne erstellen

8

Ich möchte ein Quadrat vor einer Spanne erstellen. So etwas wie dieses Bild .

Es ist mir jedoch nicht gelungen, dies mit der Eigenschaft span:before zu erstellen. Ist es möglich, damit zu erstellen? Wenn ja, kann mir bitte jemand sagen, wie kann ich das machen?

Ich habe dies mit einfachem CSS erstellt. Hier ist mein Code

HTML:

%Vor%

und CSS

%Vor%

Hier ist der Arbeitslink. Aber ich möchte nur dieses HTML verwenden.

%Vor%

Wie ist es möglich?

    
MKD 04.05.2015, 05:43
quelle

5 Antworten

11

Sie müssen content: "" hinzufügen, damit span:before funktioniert

%Vor% %Vor%
    
anpsmn 04.05.2015, 05:54
quelle
4

Sie können das tun, indem Sie "content: '■';"

hinzufügen

%Vor% %Vor%
    
Robin Carlo Catacutan 04.05.2015 05:57
quelle
2

%Vor% %Vor%
  

Fügen Sie einfach :before in Ihrem alten CSS hinzu und ändern Sie block in    inline-block , so dass es in eine Zeile passt und ein block für die   ganze span und rest ändern die css-selektoren zu :before , das ist also   nimmt seine jeweilige Farbe.

    
Kawinesh SK 04.05.2015 05:56
quelle
1

Versuchen Sie es.

CodePen-Beispiel

Was Sie tun müssen, ist die Breite aus der Spannweite zu entfernen und die Klasse zu ändern. Beachten Sie, dass :before die Eigenschaft content: '' haben muss, um angezeigt zu werden.

Hier ist HTML-Code:

%Vor%

Und css:

%Vor%     
Zlatko Vujicic 04.05.2015 05:54
quelle
1

Ссылка

Dies sollte das sein wonach Sie suchen

%Vor%     
CoBolt 04.05.2015 05:56
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Was ist eine Funktion, die ein Versprechen zurückgibt?