CODEWITHSUNDEEP
css
Miguel Moura
Miguel Moura

Reputation: 39484

Adding quotes to blockquote

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

Upvotes: 6

Views: 19584

Answers (4)

m4n0
m4n0

Reputation: 32355

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>

Upvotes: 2

Arber Braja
Arber Braja

Reputation: 445

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

Upvotes: 7

Mihai Matei
Mihai Matei

Reputation: 24276

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

Upvotes: 0

chazsolo
chazsolo

Reputation: 8494

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.

Upvotes: 0

Related Questions