与问题标题一样,是否可以更改每个单词的第一个字母的颜色和字体大小。例如,如下图所示:
是否可以使用仅 CSS执行此操作?我可以使用jQuery,但只有在纯CSS或CSS3解决方案不可能的情况下才能使用。
答案 0 :(得分:17)
您可以使用此CSS生成小写大写的文本,每个单词都大写:
h1 {
font-variant: small-caps;
text-transform: capitalize;
}
但是你不能仅使用CSS来改变首字母的颜色;您将不得不使用jQuery将span
元素添加到文本中,然后设置这些元素的样式。像这样:
$('h1').html(function() {
// Very crude regex I threw together in 2 minutes
return $(this).text().replace(/\b([a-z])/gi, '<span class="caps">$1</span>')
});
使用这个CSS:
h1 {
font-variant: small-caps;
text-transform: capitalize;
}
h1 .caps {
color: red;
}
答案 1 :(得分:2)
你去吧 -
<p class="each-word">First letter of every word is now red!</p>
.first-letter {
color: red;
}
window.onload = function(){
var elements = document.getElementsByClassName("each-word")
for (var i=0; i<elements.length; i++){
elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2")
}
}
答案 2 :(得分:1)
使用psedo-element :first-letter
,例如:
.word:first-letter
{
font-size:200%;
color:#8A2BE2;
}
正如评论所示,这需要每个单词都在其自己的元素中,例如。 <span>
但是这就越接近OP在纯CSS中想要的东西。
答案 3 :(得分:0)
HTML
<h1>The title of this page goes here</h1>
JQuery的
$(document).ready(function() {
var words = $('h1').text().split(' ');
var html = '';
$.each(words, function() {
html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
});
$('h1').html(html);
});
<强> JSFIDDLE 强>