Zahlen auf einander css Design wie 1/1, 1/2

Auf der Suche nach dieser Art von Design wie im Bild, aber nicht in der Lage, es zu bekommen. enter image description here Zahlen auf einander css Design wie 1/1, 1/2

.bottom { 
 
     font-size: 2.5em; 
 
     font-family: newparisreg; 
 
     color: #a9aaac; 
 
     letter-spacing: -4px; 
 
    } 
 
    .Slash { 
 
     color: rgba(167, 175, 179, 0.5); 
 
     font-family: "newparisreg"; 
 
     font-size: 4em; 
 
     letter-spacing: -4px; 
 
    } 
 
    
 
    .top { 
 
     font-size: 2.5em; 
 
     font-family: Roboto; 
 
     vertical-align: top !important; 
 
     letter-spacing: -4px; 
 
     color: #000; 
 
    }

<span className="top">1</span><span 
 
         className="Slash">/</span><span 
 
         className="bottom">3</span></div>

Quelle

2017-02-16 danny

Ersetzen 'className' mit nur' CLASS' und Ihr Styling beginnt stattzufinden. Siehe die Antwort unten für kleinere Zahlen. Siehe [this] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) für Informationen zu Superskripten. –

tatsächlich Klassenname ist gleich Klasse in reagieren auf seine ok. Ich suche nach CSS-Teil. – danny

Ja, ich habe danach Code gesehen, und die Klassen sind auf die gleiche Weise gemacht (ich habe keine Erfahrung mit reagieren). Aber das bedeutet, dass Sie ein anderes Problem haben - vielleicht mit der Anwendung dieser Klassen, denn dieses CSS ist in Ordnung für die Ergebnisse, die Sie erwarten. – Julsy

tat dies mit einem Element die Kraft der Pseudoelemente und das Attribut content nutzbar zu machen.

.fraction{ 
 
    font-size:3em; 
 
} 
 

 
.fraction:before{ 
 
    content:attr(data-nom); 
 
    vertical-align:super; 
 
    font-size:.5em; 
 
} 
 

 
.fraction:after{ 
 
    content:attr(data-dem); 
 
    vertical-align:middle; 
 
    font-size:.5em; 
 
}

<span class="fraction" data-nom="1" data-dem="3">/</span>

Quelle

2017-02-16 17:20:04

Zahlen auf einander css Design wie 1/1, 1/2

Antwort

Verwandte Themen