コンテンツ、2つのスタイル

Question

にテキストを分割する方法を、私は、次のしているコードは：ボタンはアリア・ラベルを持っている場合

.button { 
    &[aria-label*='first']::after { content: 'some text'; } 
} 

それはチェックし、それが「最初の」であるならば、それはいくつかのテキストを追加します'私は色で「一部のテキスト」のスタイルを設定したいが、黒の色を持つものと、赤の色を持つ「テキスト」の2種類があります。それは可能ですか？

Answer 1

擬似要素でHTMLコンテンツを使用することはできませんが、代替として、この場合は::afterと::beforeの両方を使用できます。しかし、注意してください、それらの2つだけがあります。

.button[aria-label*='first']::after { 
 
    position: relative; 
 
    content: 'some'; 
 
    left: 1em; 
 
    color: #fcc; 
 
} 
 

 
.button[aria-label*='first']::before { 
 
    position: relative; 
 
    content: 'text'; 
 
    left: 6.5em; 
 
    color: #ccf; 
 
}

<div class="button" aria-label='first-button'>Hi</div>

良い方法：：だから、これはあなたが行く方法です

.button[aria-label*='first']::after { 
 
    content: 'some'; 
 
    color: #f00; 
 
} 
 

 
.button[aria-label*='first']::before { 
 
    content: 'text'; 
 
    color: #ccf; 
 
}

<button class="button" aria-label='first-button'></button>