如何通过css快速实现文字首字母放大或大写效果

fox/ 2023年07月24日/ CSS教程/ 浏览 1597

在网页中,经常可以见到内容的首字母/字进行放大或同时大写效果,对内容进行强化,如下图:




我们可以通过CSS 中选择确定的 first-of-type 元素。同时使用 ::first-letter 伪类去实现首字母大写的效果。通过配合其他css属性,进行差异化显示。


这个类可以让我们更自由的添加样式。所以,你可以调整大写字母的样式以符合你的站点设计风格。


这里我们是应用追格官网首页,做的效果,大家可以结合自己网站风格进行优化

参考可访问追格官网:www.zhuige.com


.zhuige-trade-info div {
	font-size: 14px;
	font-weight: 200;
	color: #777777;
	line-height: 30px;
}
 /* 以上为原始代码,下面这部分是首字母放大 */
.zhuige-trade-info div:first-of-type::first-letter {
    color: #6633aa;
    float:  left;
    font-size: 4rem;
    line-height: 4vw;
    font-weight: 600;
    padding-right: 8px;
}

发表评论

暂无评论,抢个沙发...

客服 工单