内容的CSS后，如何将文本分成两种风格

Question

我有以下代码：

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

它检查按钮有唱段标签，如果它是“第一”，它会追加“一些文本”。我想用颜色来设计'某些文字'，但'一些'有黑色，'文字'有红色。这是可能的和如何？

Answer 1

尽管您不能在伪元素中使用HTML内容，但作为替代方法，您可以在这种情况下同时使用::after和::before。但请注意，只有这两个。所以，这是你走的路：

.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>