Question

我需要一个以页面为中心的块引用，在它前后加双引号Plunker Example：

.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;
}

我有以下CSS：

@"uE604"

不知何故，我的引号放在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;
}

Answer 2

要修改当前实现，可以使用绝对定位来对齐它们。

position: absolute同时:after和:before pesudo-element。相应地更改左，右和底部值。
让blockquote拥有position: relative，以便相对于它放置引号（绝对定位）。

Updated Plunker

.wrapper {
  text-align: center;
}
blockquote {
  margin: 0 auto;
  max-width: 400px;
  position: relative;
  /* Added */
}
blockquote::after,
blockquote::before {
  color: green;
  font-size: 8rem;
  line-height: 0.8;
}
blockquote::after {
  content: close-quote;
  vertical-align: bottom;
  /* Added */
  position: absolute;
  right: -15%;
  bottom: -60px;
}
blockquote::before {
  content: open-quote;
  vertical-align: top;
  /* Added */
  position: absolute;
  left: -20%;
}
p {
  font-size: 1.125rem;
  font-style: italic;
  text-align: left;
}
@media (max-width: 600px) {
  blockquote::after {
    bottom: unset;
    right: 0;
  }
  blockquote::before {
    left: 0;
  }
  blockquote p {
    padding-top: 55px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <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>
</body>

</html>

Answer 3

将blockquote设为position: relative;，然后将blockquote:before和blockquote:after设为position: absolute;。

完成后，您可以根据需要定位它们。

Answer 4

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote:after {
  color: #ccc;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

Fiddle

在blockquote中添加引号

4 个答案: