Text im Winkel-Material Schalter Daumen

Question

Ich kann Text nicht mit Winkelmaterial in den Winkelschalter platzieren. Ich benutze das folgende Tag und ich möchte Text in den Schalter Daumen einfügen.

<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="data.cb5"><p>hi</p> 
         </md-switch> 

In der folgenden Abbildung brauche ich die Ausgabe so.

Answer 1

mit diesem Versuchen Sie, Ihre Frage

<md-switch class="inline-label" md-no-ink aria-label="Switch No Ink" ng-model="data.cb5"><p>hi</p> </md-switch> 

CSS

md-switch.inline-label .md-bar::before { 
    position: absolute; 
    font-size: 9px; 
    line-height: 13px; 

    content: "off"; 
    right: 0; 
    padding-right: 3px;  
} 

md-switch.inline-label.md-checked .md-bar::before { 
    content: "on"; 
    left: 0; 
    padding-left: 3px; 
} 

Answer 2

Versuchen Sie dieses Problem lösen könnte ..

md-switch.md-checked .md-thumb:before{ 
    content: 'on'; 
    color: white; 
    line-height: 20px; 
    padding-left: 2px; 
    font-size: 14px; 
}