某些情况下HTML由其他框架生成,无法直接改底层源码,这就需要使用CSS动态生成技术了
使用两个伪元素可以很轻松生成前后两个书名号
还可以用 CSS quotes 来生成书名号,不过只针对q元素生效
默认情况下,文本省略会把右侧的书名号也省略
书名号之所以会连同文本一起被省略,在于和标题文本处于同一文本流中,需要把右侧书名号脱离文本流。
绝对定位居右定位可以脱离文本流,不过需要预留一点空间,不然会和下面的文本重叠
块级元素宽度默认撑满,可以设置宽度为fit-content自适应文字宽度
浮动布局也可以脱离文本流,不过要求浮动元素在HTML结构中的左侧,::after元素在文本右侧,无法使用浮动实现该效果
除了伪元素,还可以通过::marker来生成内容,而且也位于文本左侧
使用::marker生成左侧书名号,::brfore生成右侧书名号,相比绝对定位的优势是,无需给定一个"大概"的右内边距
希望能对你的工作带来帮助和不一样的思考,最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发 ❤❤❤
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。