如何在HTML / CSS中设计双引号？

Question

我有一个如下所示的设计，我将在HTML / CSS中进行复制。设计的屏幕截图如下所示：

此时此刻，我可以在fiddle中获得此信息。在小提琴中，我使用了简单的双引号逗号，但它看起来与图像中的不一样。

我在小提琴中使用的HTML代码片段是：

<h6>What Do Our Customers Have to Say ?</h6>
<p>
"BPRO helped me realize the importance of cus-
tomer organization and tracking, service track-
</p>

问题陈述：

我想知道我应该在小提琴中做出哪些改变，以便我能够复制上面的截图。

Answer 1

您应该after和before支持unicode个字符。

请注意，如果您使用utf-8字符集，则字体中包含所有这些字符。你只需要搜索＆amp;选择你需要的东西。

你可以参考下表，我个人觉得它在日常生活中非常有用。

--> Unicode Table

p::after{
content:"ˮ";
color:green;
font-size:18px;
}
p::before{
content:"“";
font-size:18px;
color:green;
}
p{
font-size:16px;
}

<p>This is some sample content, which looks like a quote.</p>

Answer 2

通常，这是通过:before和:after元素利用content属性中的实际引号字符（或有时是SVG）来实现的。对于这个例子，我只是将它们松散地放在了blockquote上。

blockquote {
  padding: 20px 60px;
  background: #eee;
  border-radius: 10px;
  font-family: arial;
  line-height: 1.625;
  position: relative;
}

blockquote p {
  text-align: center;
}

blockquote span {
  position: relative;
  display: inline-block;
}

blockquote span:before {
  content: "“";
  font-size: 72px;
  color: #79b83a;
  position: absolute;
  left: -40px;
  top: 40px;
  line-height: 0;
}

blockquote span:after {
  content: "”";
  font-size: 72px;
  color: #79b83a;
  position: absolute;
  right: -40px;
  bottom: -10px;
  line-height: 0;
}

<blockquote><span>BPRO helped me realize the importance of cus- tomer organization and tracking, service track- ing and just being on the top of things behind the scene. The more you grow – the more difficult this becomes – but having the right tools to keep your business organized is just as impor- tant as having the right tools to do job itself.</span>
<p>Some Person - Some Day 2018</p></blockquote>

Answer 3

您的问题：当您想在text内设置<p>时，您无需使用""
所以干脆就这样做：

span{
color:green;
}
p{ 
margin-left:20px;
}

    
   <span> “</span>
   <p>
    BPRO helped me realize the importance of cus-
    tomer organization and tracking, service track-
    </p>
    <span>”</span>