有没有什么办法在不改变HTML的情况下加上书名号呢？🤔

这就需要CSS动态生成技术了，你有什么想法呢？一起看看吧一、使用伪元素生成书名号没错，很多同学可能会想到用伪元素，前后各添加一个就好了.books::before{
content: '《'
}
.books::after{
content: '》'
}效果如下

除了手动使用伪元素生成伪元素外，还可以用 CSS quotes 来生成书名号.books{
quotes: "《" "》"
}但是，普通元素直接写这个没什么效果，只有q标签才会显示书名号<q class="books">灵境行者</q>
<h3 class="books">斗破苍穹</h3>
<h3 class="books">我师兄实在太稳健了</h3>
...

原因是，q标签会自带默认样式，自动创建了伪元素

所以，普通元素如果也想用quotes属性，可以手动添加.books::before{
content: open-quote
}
.books::after{
content: close-quote
}效果如下

不过这样好像还不如直接使用伪元素方便了吧？😂二、书名号内文本超出省略CSS 单行文本超出省略很容易，只需要下面 3 行white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;当宽度比较小时，部分标题也发生了省略，如下

有设计师表示，这样不是很好看🙅🏻‍♀️，这个省略号能否在书名号里面呢，就像这样

正常情况下，我们会选择给中间的文本额外新增一层标签，然后把文字省略设置在这个标签上<q class="books"><span>灵境行者</span></q>
<h3 class="books"><span>斗破苍穹</span></h3>
<h3 class="books"><span>我师兄实在太稳健了</span></h3>
...但是如果无法更改HTML结构，这里有办法只用一层标签实现吗？当然也是有的，下面介绍两个思路三、好用的绝对定位书名号之所以会连同文本一起被省略，在于和标题文本处于同一文本流中，所以需要将这个书名号提取出来，脱离这个文本流。首先可以想到的是绝对定位，需要注意给右侧留一点内边距（不然就重叠了），这里给一个字号宽度.books{
position: relative;
padding-right: 1em;/只能大概给一个固定距离/
}
.books::after{
position: absolute;
right: 0;
}效果如下

由于是块级元素，宽度默认撑满，所以书名号跑到最右边了，可以给元素加一个最大宽度为文本宽度.books{
/**/
max-width: fit-content;
}这样就正常了

完整代码可以查看：https://codepen.io/xboxyan/pen/emOBeGa点击预览四、有些冷门的浮动除了前面的绝对定位，浮动也能实现类似的效果。.books::after{
float: right
}效果如下

但是当文本过长时，浮动元素掉下来了，并没有实现环绕效果。其实，这个跟文档的顺序有关，浮动元素必须位于前面才行，也就是::before元素才可以，我们试试.books::before{
float: right
}效果如下，很好的位于最右侧（红色部分）

那么现在问题来了，::before被用掉了，用于生成右书名号，那通过什么来生成左书名号呢？思索了一番，整个CSS中还有一个伪元素可以生成文本，那就是::marker，而且也位于左侧。不过需要设置display属性为list-item才会出现.books{
/**/
display: list-item;
list-style-position: inside;
}
.books::marker{
content: '《';
}
.books::before{
content: "》";
float: right;
color: red;
}这样就能代替原本的::before生成左书名号了（左侧是::marker，右侧是::before）

同样还有最大宽度的问题.books{
/**/
max-width: fit-content;
}同样能实现类似的效果，相比绝对定位来说，无需给一个“大概”的右内边距

完整代码可以查看：https://codepen.io/xboxyan/pen/ZYzBajg点击预览五、总结一下以上就是本文的全部技巧了，你学到了？下面总结一下某些情况下HTML由其他框架生成，无法直接改底层源码，这就需要使用CSS动态生成技术了使用两个伪元素可以很轻松生成前后两个书名号还可以用 CSS quotes 来生成书名号，不过只针对q元素生效默认情况下，文本省略会把右侧的书名号也省略书名号之所以会连同文本一起被省略，在于和标题文本处于同一文本流中，需要把右侧书名号脱离文本流。绝对定位居右定位可以脱离文本流，不过需要预留一点空间，不然会和下面的文本重叠块级元素宽度默认撑满，可以设置宽度为fit-content自适应文字宽度浮动布局也可以脱离文本流，不过要求浮动元素在HTML结构中的左侧，::after元素在文本右侧，无法使用浮动实现该效果除了伪元素，还可以通过::marker来生成内容，而且也位于文本左侧使用::marker生成左侧书名号，::brfore生成右侧书名号，相比绝对定位的优势是，无需给定一个"大概"的右内边距希望能对你的工作带来帮助和不一样的思考，最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发 ❤❤❤前端csscss3赞2收藏1分享阅读 326发布于 4 月 21 日

XboxYan18.2k 声望14.1k 粉丝关注作者« 上一篇CSS 如何模拟“真实的”进度条？