我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

继续科普一下css的伪元素,本文主要来科普两个伪元素,即首字母::first-letter和首行::first-line。使用起来非常简单,需要注意的是:这两个伪元素可以作用的位置是大段文本。

苏南大叔:css伪元素,段落首行首字伪元素如何使用? - 首行首字母伪元素
css伪元素,段落首行首字伪元素如何使用?(图2-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述的内容很简单,就是css作用于大段文本的伪元素:首字母::first-letter和首行::first-line。测试环境:win10chrome@104.0.5112.81

测试代码

这两个伪元素分别是首字母::first-letter和首行::first-line。看英文顾名思义即可理解具体的含义。

<style>
html,body,p,div,span{ font-size: 18px;}
p,div,span { color: black; width: 160px;}
span#block { display: block;}
p::first-letter,div::first-letter,span::first-letter,span#block::first-letter { color: green; font-size: 2em;}
p::first-line,div::first-line,span::first-line,span#block::first-line { color: blue; }
</style>
<p>p首行首字母,更多文字放这里</p>
<div>div首行首字母,更多文字</div>
<span id="block">span首行首字母,更多文字</span>
<span>span首行首字母,更多文字</span>

苏南大叔:css伪元素,段落首行首字伪元素如何使用? - 效果图
css伪元素,段落首行首字伪元素如何使用?(图2-2)

代码解释

在上述测试代码中,可以看到:pdiv都可以使用::first-letter::first-line。但是span不可以使用::first-letter::first-line

对默认inlinespan来说,获得::first-letter::first-line的最好方法是:display:block。另外一个文章,写的是:列表元素的marker伪元素,也有类似的变化。请参考:

相关文章

综述

首字特殊处理这个需求,还是非常常见的。但是对于首行进行控制,这个需求似乎不常见。更多css伪元素的相关经验文章,请点击:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css