5

I need a blockquote centered in page with double quotes before and after it Plunker Example:

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

And I have the following 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;
} 

Somehow my quotes are placed before and after blockquote.

I would like the opening one to be on top left position and the closing one to be on bottom right position ...

How can I do this?

Update:

Something that looks like this: blockquote

4 Answers 4

6

I think that this should work:

http://jsfiddle.net/bt1r6psx/

Make blockquote as position: relative and blockquote:after and blockquote:before, position absolute. Then you can position them wherever you want.

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;
}
2
  • Same problem as in Manoj Kumar suggestion. The quotes dissapear when resizing the window. I just forked your code with center aligned: jsfiddle.net/t0fndt7k/1 Commented Oct 2, 2015 at 16:29
  • Just reforked your fork: jsfiddle.net/6mxy7wm2 (added padding to the wrapper so it helps keeping the quotes visible when window gets resized and on small screens ... Commented Oct 2, 2015 at 16:36
2

To modify your current implementation, you can use absolute positioning to align them.

  1. position: absolute to both :after and :before pesudo-element. Change the left, right and bottom values accordingly.
  2. Let blockquote have position: relative so that the quotes(absolutely positioned) are placed with respect to it.

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>

9
  • I need the quotes to be on left and right .. I just uploaded an image to my question to make it easier to see. Commented Oct 2, 2015 at 15:46
  • Code updated. Same method, changed the positioning values.
    – m4n0
    Commented Oct 2, 2015 at 15:58
  • Only one problem left: when the window is resized to a smaller size the quotes disappear ... The ideal would be the quotes to be always visible and the text in the center become narrow. I tried to add some padding but it is only applied to text ... And margin I cannot use because it is used to make it center. Any idea of how to fix this? Commented Oct 2, 2015 at 16:08
  • Within media queries, use the alternative code then:plnkr.co/edit/ageAzKopvRxBbbMXyEJi?p=preview So when window is resized you can show the block-quotes within the paragraph view-able area.
    – m4n0
    Commented Oct 2, 2015 at 16:12
  • But using media queries should not be necessary ... Isn't possible to "get" the area for the quotes so they don't disappear? Commented Oct 2, 2015 at 16:25
0

Set your blockquote to be position: relative;, then set blockquote:before and blockquote:after to be position: absolute;.

Once that's done, you can position them as you like.

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

1
  • Not quite the look I am looking for. I just uploaded an image to my question to make it easier to see. Commented Oct 2, 2015 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.