How to design double inverted commas in HTML/CSS?

问题

I have a design as shown below which I to replicate in HTML/CSS. The screen-shot of the design as shown below:

At this moment, I am able to get this in fiddle. In the fiddle, I have used simple double inverted commas but it doesn't look like the same as in the image.

The snippets of HTML code which I have used in the fiddle is:

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

Problem Statement:

I am wondering what changes I should make in the the fiddle so that I am able to replicate the above screenshot.

回答1:

Typically this is achieved with a :before and :after element utilizing the actual quotation characters in the content attribute (or sometimes an SVG). For this example I just loosely positioned them to the 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>

回答2:

You should after and before which supports unicode characters.

Please note that, if you are using utf-8 charset, you have all these characters in the font. You just have to search & choose what you need.

You can refer the following table, I personally found it very much useful in everyday life.

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

回答3:

your problem:
when you wnt to set text inside <p> you dont nee to use ""
so simply do it:

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>

来源：https://stackoverflow.com/questions/50226608/how-to-design-double-inverted-commas-in-html-css

标签

html

css

comma