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

Question

我有一个设计，如下所示，我要在 HTML/CSS 中复制它。设计截图如下：

此刻，我可以在fiddle中得到这个。在 fiddle 中，我使用了简单的双引号，但它看起来与图片中的不一样。

我在 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>

问题陈述：

我想知道我应该在 fiddle 中进行哪些更改，以便我能够复制上面的屏幕截图。

Answer 1

你的问题：
当你想设置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>

Answer 2

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

请注意，如果您使用的是 utf-8 字符集，则字体中包含所有这些字符。您只需搜索并选择您需要的内容。

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

--> 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 3

通常这是通过 :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>

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

How to design double inverted commas in HTML/CSS?

html

css

comma