好用的绝对定位

书名号之所以会连同文本一起被省略，在于和标题文本处于同一文本流中，所以需要将这个书名号提取出来，脱离这个文本流。首先可以想到的是绝对定位，需要注意给右侧留一点内边距（不然就重叠了），这里给一个字号宽度.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生成右侧书名号，相比绝对定位的优势是，无需给定一个"大概"的右内边距