css中的双引号逗号

Question

我有一个设计，我试图在HTML和CSS中复制。

此时，我能够在fiddle中得到这个，但我无法复制双重引号，如设计中所示。

我用于第二段的HTML代码是：

<div id="line2" class="col-lg-12">
                    <div class="cofounder-ceo-image">
                        <img src="assets/img/Uploads/jack_v1.jpg"> </div>
                    <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say </p>

                    <p class="ceo">Jack Lau - Co-founder and CEO</p>
                </div>

我很想知道，有没有什么方法可以在CSS中复制双引号逗号，或者只是我们需要在特定位置发布双引号的图像？

Answer 1

您可以使用::after伪元素。在每个段落之后，添加倒置的引号并将它们放置到所需的一侧。此代码仅适用于第一段（仅在右侧），但您可以轻松创建可重复的类，每侧一个，只需相应地切换right和left属性。像这样：

#line2 p {
  position: relative;
}
#line2 p:after {
  content: "\"";
  position: absolute;
  top: -50px;
  right: -100px;
  font-size: 140px;
  color: gray;
}

如果你需要那个确切的＆＃34;倒置的逗号＆＃34;，请使用与你的例子完全相同的字体，或者只是一个图像：

#line2 p:after {
  content: url(https://i.stack.imgur.com/wyH2G.png);
  position: absolute;
  top: -70px;
  right: -100px;
  font-size: 140px;
  color: gray;
}

Fiddle

Answer 2

您可以使用psedoelements（::after和::before）将元素附加到另一个元素，如下所示：

.our-vision p{
  position: relative;
}

.our-vision #line2 > p::before,
.our-vision #line3 > p::after{
  position: absolute;
  font-size: 5em;
  color: #ccc;
}

.our-vision #line2 > p::before{  
  content:"\201D";
  top: -0.5em;
  right: -0.5em;
}

.our-vision #line3 > p::after{
  content:"\201C";
  bottom: -0.5em;
  left: -0.5em;
  }
}

小提琴：https://jsfiddle.net/ttfwchq3/3/

然而，你在这里设计的似乎是blockquote（尽管反向）。如果是这种情况，您可能希望设置blockquote元素的样式并使用它。