段落开头和结尾的双箭头

Question

我希望段落上有双箭头。就像下面的图片一样。

我如何通过CSS实现这一目标？

CSS代码

.people-wrap p {
  position: relative; 
  display: inline-block; 
  float: none; 
  padding-bottom: 15px; 
  font-family:'Droid Serif', serif; 
  font-size:17px !important; 
  font-style:italic;
}

Answer 1

您可以使用两个伪元素：

.people-wrap p:before {
  content: "«";
  padding-right: .5em;
}
.people-wrap p:after {
  content: "»";
  padding-left: .5em;
}

<div class="people-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula sapien eu ullamcorper vulputate. Nunc quis viverra nisi. Integer quis neque sit amet dolor lobortis gravida. Duis eget lacinia ipsum, quis malesuada est. Mauris vitae ultricies leo. Donec ac orci non justo consectetur aliquet. Aenean semper mi ut dui posuere iaculis non at magna. Maecenas sit amet lacus ut nunc commodo consequat sed sit amet purus. In cursus ac leo sed convallis. Curabitur efficitur eget mi sit amet maximus. Proin tincidunt nulla vitae metus viverra dignissim. Curabitur gravida, turpis id auctor facilisis, nulla dolor lacinia risus, sed vulputate enim lectus et diam.</p>
</div>