CSS style Unicode for Left Double Quote

Question

I want to style the Left Double Quote at the top center of my card, so it looks like a title(can be seen in pen here). I want it to appear bigger in size and want to learn how to style it separate from the font. Can somebody plz help?

HTML(Pug):

.main
  .container
    blockquote.quote Success is no accident. It is hardwork, perseverance, learning, studying, sacrifice, and most of all, love of what you are doing or learning to do.
      footer Pele

SCSS:

.main {
  height: 100vh;
  width: 100vw;
  background-color: mintcream;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
 position: relative;
 height: 270px;
 width: 600px;
 background-color: tomato;
 -webkit-box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);

   font-size: 24px;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  position: absolute;
  margin: 0 auto;

} 

.quote {
  position: absolute;
  top: 30px;
  font-family: 'Bitter', serif;
  color: white;
  font-size: 24px;
}

Possible duplicate of [Make big quotes with
](https://stackoverflow.com/questions/16325687/make-big-quotes-with-blockquote) — mercator, Nov 10 '17 at 22:17

score 1 · Answer 1 · answered Nov 10 '17 at 22:14

1

Add the styles to the ::before as this is the element you are adding

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  position: absolute;
  margin: 0 auto;
  color:#000; 
  font-size: 50px;
  top: -40px;
  left: 50%;
}

answered Nov 10 '17 at 22:14

DesignMonkeyJim

1,875
1
10
23

score 1 · Accepted Answer · answered Nov 10 '17 at 22:18

Well, you can always apply basic css text styles to it, but if you want to change the appearance further (make it look different then the font's quotes), then inserting a SVG or an icon is the way to go.

Personally, I would just search for a font, where I like the left double quotes, download the font, then use a program like Inkscape to write in it, convert it to a path and change it from there.

score 0 · Answer 3 · answered Nov 10 '17 at 22:21

Thank you for all the ideas! I tried something simple and it worked well for me:

.main {
  height: 100vh;
  width: 100vw;
  background-color: mintcream;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  height: 270px;
  width: 600px;
  background-color: tomato;
  -webkit-box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);
  font-size: 24px;
}

span {
  position: absolute;
  left: 40%;
  font-size: 110px;
  margin: -30px;
  line-height: 0.6em;
  opacity: 0.4;
}

.quote {
  position: absolute;
  top: 30px;
  font-family: 'Bitter', serif;
  color: white;
  font-size: 24px;
}

<div class="main">
  <div class="container">
    <blockquote class="quote"><span>&#10077; </span>
      <p>Success is no accident. It is hardwork, perseverance, learning, studying, sacrifice, and most of all, love of what you are doing or learning to do.</p>
      <footer>Pele</footer>
    </blockquote>
  </div>
</div>

CSS style Unicode for Left Double Quote

3 Answers3