我可以使用CSS来改变每个单词的第一个字母的颜色和字体大小 [英] Can I use just CSS to change color and font size of first letter of every word

问题描述

在问题标题中，可以更改每个单词的第一个字母的颜色和字体大小。例如，如下图所示：

As in the question title, is it possible to change the color and font size of the first letter of every word. For example, like the following image:

是否可以使用仅 CSS执行此操作？我可以使用jQuery，但只有当它不可能与纯CSS或CSS3解决方案。

Is it possible to do this with only CSS? I could use jQuery but only if it is not possible with a pure CSS or CSS3 solution.

推荐答案

h1 {
    font-variant: small-caps;
    text-transform: capitalize;
}

但是你不能改变初始字母的颜色CSS单独;你将不得不使用jQuery添加 span 元素到你的文本，然后样式这些元素。这样的东西：

But you won't be able to change the color of the initial letters using CSS alone; you're going to have to use jQuery to add span elements to your text then style those elements. Something like this:

$('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;
}

这篇关于我可以使用CSS来改变每个单词的第一个字母的颜色和字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！