プリプロセッサを使用せずにCSSクラスを組み合わせることにより、より迅速にコーディング

Question

フォームを構築する際に、必要なものを指定する必要があります。私はこのレシピに従ってください：

<span class='glyphicon glyphicon-asterisk' style'color:red;font-size:9px;'></span>Label 

私の目標は、人々がLESSミックスインを使用することを読んだことがある、ブートストラップのglyphicon-asteriskしかし、また、私は自分のスタイルrules.Iを組み合わせることができるだけでなく、ブートストラップ​​クラスを使用しています1つのCSSクラスを作成することですこれをする。これが動作しない何らかの理由が

.req{ 
     position:relative; 
     top:1px; 
     display:inline-block; 
     font-family: 'Glyphicons Halflings'; 
     font-style:normal; 
     font-weight:normal; 
     font-size: 9px; 
     font-color:red; 
     line-height: 1; 
     -webkit-font-smoothing: antialiased; 
     -moz-osx-font-smoothing: grayscale; 
     content:"\2a"; 


    } 

：別のルート

にこのようなコードを見何かを行くことが可能である場合は、私が求めています。

これは、組み合わせたい2つのブートストラップクラスです。

<span class='req'></span>Label 

私はオリジナルのものと同じ出力を受け取ります：コードを使用するときに私はLESSやSASSまたは任意のプリプロセッサを使用せずにこれを達成するにはどうすればよい

.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 

    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.glyphicon-asterisk:before { 
    content: "\2a"; 
} 

。

注私は既存のブートストラップクラスを上書きしたくありません。 2つのブートストラップクラスを使用する独自のstyle.cssで新しいクラスを作成したいと思います。

Answer 1

font-color CSSプロパティがありません。colorを使用する必要があります。また、1つのクラスだけを使用したい場合は、このコードを使用できます。

.req { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    font-size:9px; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.req:before { 
    content: "\2a"; 
    color: red; 
} 

Answer 2

問題は、.req内で 'content： "\ 2a"'を使用することですが、before：またはafter：にのみコンテンツを割り当てることができます。