css - 将具有 :before 内容属性的先前跨度的跨度大写

Question

我有这个代码:

<style>
.caps {
 text-transform: capitalize
}
.stuffBefore:before {
 content: 'a';
}
</style>

<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>

我基本上想要实现的是展示

之后的东西

但我实际得到的是

之后的东西

我不能在“a”和“stuff”之间添加一个空格(拿这个作为问题的例子，真正的问题有点复杂)但我认为“span”标签可以作为分隔符，就像空格一样。我可以通过添加更多 CSS 来实现吗？

Answer 1

这是一种方法:

JsFiddle:https://jsfiddle.net/8vzmv06p/

.caps {
 text-transform: capitalize;
 position:relative;
}
.caps > span{
 float:left;
}
.stuffBefore:before {
 content: 'a';
 text-transform: none;
}

<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>