css中after的内容，如何将文本分成两种样式

Question

我有以下代码：

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

它检查按钮是否有 aria-label，如果它是“第一个”，它将附加“一些文本”。我想用颜色设置“一些文本”的样式，但“一些”有黑色，“文本”有红色。这可能吗？如何实现？

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>