我正在尝试使用样式设置段落的第一个字母CSS
并想使用 greensock 添加一些动画,但实际上要求是设置每个单词的第一个字母的样式,而不仅仅是第一个字母段落。
对此有何建议/想法?
p{
font-size:150%;
color:#000000;
}
p::first-letter {
font-size: 200%;
color: #ff0000;
}
<p>Hello This Is The Title</p>
UPDATE我尝试处理以下方式(添加跨度标签并定位每个跨度的第一个元素),但它不起作用:
p span:nth-child(1)::first-letter {
font-size: 200%;
color: #ff0000;
}
与使用split(" ") https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split用于从字符串创建数组并forEach() https://www.w3schools.com/jsref/jsref_forEach.asp是迭代每个单词。然后剪切单词的第一个字母,然后附加span
.并用span添加css效果
var str = $('p').text().split(" ");
$('p').empty();
str.forEach(function(a) {
$('p').append(' <span>' + a.slice(0, 1) + '</span>' + a.slice(1))
})
p {
font-size: 150%;
color: #000000;
}
span {
font-size: 200%;
color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello This Is The Title</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)