Spu*_*ley 155
每个人都说无法做到.我在这里证明不然.
是的,可以做到.
好的,所以这是一个可怕的黑客,但它可以做到.
我们需要使用两个CSS功能:
首先,CSS提供了改变文本流的方向的能力.这通常用于阿拉伯语或希伯来语等脚本,但它实际上适用于任何文本.如果我们将它用于英文文本,则字母的显示顺序与标记中的显示方式相反.因此,要使文本在反转元素上显示为单词"String",我们必须具有读取"gnirtS"的标记.
其次,CSS有::first-letter伪元素选择器,它选择文本中的第一个字母.(其他答案已经确定,这是可用的,但没有等效的::last-letter选择器)
现在,如果我们将::first-letter反向文本组合起来,我们可以选择"gnirtS"的第一个字母,但看起来我们正在选择"字符串"的最后一个字母.
所以我们的CSS看起来像这样:
div {
unicode-bidi:bidi-override;
direction:rtl;
}
div::first-letter {
color: blue;
}
和HTML:
<div>gnirtS</div>
是的,这确实有效 - 你可以在这里看到工作小提琴:http://jsfiddle.net/gFcA9/
但正如我所说,它有点hacky.谁愿意花时间把所有东西都倒退？这不是一个实际的解决方案,但它确实回答了这个问题.
Sup*_*arp 36
使用::after伪元素结合attr()函数:
p::after {
content: attr(data-end) ;
color: red ;
}
<p data-end="g">Strin</p>
p::after {
content: attr(data-end) ;
color: red ;
}<p data-end="g">Strin</p>Mar*_*Alx 17
另一种解决方案是使用 ::after
.test::after{
content:"g"
color:yellow;
}
<p class="test">strin</p>
此解决方案允许更改所有字符的颜色,而不仅仅是像Spudley使用的答案字母::first-letter.有关详细信息,请参阅::first-letter 规范 ::first-letter仅适用于忽略标点符号的字母.
此外,如果你想要比最后一个角色更多颜色:
.test::after{
content:"ing"
color:yellow;
}
<p class="test">str</p>
有关::查看此链接后的更多信息.
Dav*_*ger 12
不使用javascript,您唯一的选择是:
<p class="test">strin<span class="other-color">g</span></p>
编辑您的小提琴链接:
我不确定你为什么说你不需要一个javascript解决方案,因为你已经有很多它了.无论如何,在此示例中,您只需进行一些小的更改.改变第10行
elem.text(elem.text() + contentArray[current++]);
至
if ( current == contentArray.length-1 ) {
elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
elem.html(elem.html() + contentArray[current++]);
}
请注意,使用.html()而不是.text()现在很重要,因为实际上插入了HTML标记.
工作小提琴:http://jsfiddle.net/QTUsb/2/
只使用CSS和::after伪元素就可以实现它而不需要对HTML进行任何更改:
.test {
font-size: 16pt;
position: relative;
}
.test::after {
bottom: 0;
color: red;
content: 'g';
position: absolute;
transform: translate(-100%, 0);
}<p class="test">string</p>