CSS 给标题添加书名号

比如，有一些标题，我们想要在它前后加一些前缀和后缀(比如, 书名号). 假设它当前是这样的:

<h3 class="books">first header</h3>
<h3 class="books">second header</h3>
<h3 class="books">third header</h3>

有没有什么办法在不改变 HTML 的情况下给标题的前后加上书名号呢?（例如某些情况下 HTML 由其他框架生成，无法直接改底层源码）

这里可以使用 CSS 动态生成技术了，以下是几种方法：

伪元素 before 和 after

<html>
<body>
<h3 class="books">first header</h3>
<h3 class="books">second header</h3>
<h3 class="books">third header</h3>
</body>
<style>
  body { background-color: white;}
  .books::before { content:'<<' }
  .books::after { content:'>>' }
</style>
</html>

CSS quotes

除了使用伪元素生的方法之外，还可以用 CSS quotes 来生成书名号.

但是 CSS quotes 需要搭配 q 标签使用. 这里拿出来仅供参考

<html>
<body>
<q class="books">first header</q>
<q class="books">second header</q>
<q class="books">third header</q>
</body>
<style>
  body { background-color: white;}
  .books { quotes: "<<" ">>"; display: block }
</style>
</html>

CSS 给标题添加书名号

伪元素 before 和 after

CSS quotes

分类