css - 将引号添加到 blockquote

Question

我需要一个在页面居中的 block 引用，前后都有双引号 Plunker Example :

<div class="wrapper">      
  <blockquote>
    <p>Quote text</p>
  </blockquote>      
</div>

我有以下 CSS:

.wrapper {
  text-align: center
}

blockquote {
  margin: 0 auto;
  max-width: 400px;
}

blockquote:after, blockquote:before {
  color: @green;
  font-size: 8.0rem;                                      
  line-height: 0.8;

} 

blockquote:after {                                                       
  content: close-quote;
  vertical-align: bottom;
}

blockquote:before {                                     
  content: open-quote;
  vertical-align: top;
}

p {
  text-align: left;                                 
    font-size: 1.125rem;
  font-style: italic;
} 

不知何故，我的引语被放在 blockquote 之前和之后。

我希望开始的一个在左上角的位置，结束的一个在右下角的位置 ...

我该怎么做？

更新:

看起来像这样的东西:

Answer 1

我认为这应该可行:

http://jsfiddle.net/bt1r6psx/

将 blockquote 设置为 position: relative 和 blockquote:after 和 blockquote:before，position absolute。然后您可以将它们放在任何您想要的位置。

HTML:

<div class="wrapper">      
  <blockquote>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </blockquote>      
</div>

CSS:

blockquote {
    position: relative;
    /* background: #ddd; */
}

blockquote:before {
  position: absolute;
  content: open-quote;
  font-size: 4em;
  margin-left: -0.6em;
  margin-top: -0.4em;
}
blockquote:after {
  position: absolute;
  content: close-quote;
  font-size: 4em;
  bottom: 0;
  right: 0;
  margin-right: -0.6em;
  margin-bottom: -0.8em;
}
blockquote p {
  display: inline;
}