[分享]css3实现双引号

在CSS3中，我们可以借助:before和:after伪元素实现双引号的效果。首先，我们需要为我们的文字添加一个包装元素，这里我使用了一个p元素：你好，这是一段引用的文字。 接下来，我们可以使用:be...

在CSS3中，我们可以借助:before和:after伪元素实现双引号的效果。首先，我们需要为我们的文字添加一个包装元素，这里我使用了一个p元素：

<p>你好，这是一段引用的文字。</p> 

接下来，我们可以使用:before和:after来添加引号元素。需要注意的是，在使用:before和:after时，需要给它们设置content属性，来指定其内容。这里我使用的是Unicode编码中的双引号字符：

p::before {
  content: "“";
}

p::after {
  content: "”";
} 

通过上述代码，我们就成功地给我们的文字添加了双引号。完整的代码如下：

<style>
  p::before {
    content: "“";
  }

  p::after {
    content: "”";
  }
</style>

<p>你好，这是一段引用的文字。</p> 

最终效果如下：

你好，这是一段引用的文字。

“你好，这是一段引用的文字。”