Stylization quotes

Question

I ran into a problem issuing quotes. So I'm trying to make quotation marks a bit compared to text so that it blends well. I played with relative and absolute positioning, but could not understand. This program will become a generator of random quotes, and the position of the final quote should be such that it aligns with the text, if there is a quote that spans several lines.

body {
  background-color: rgb(44, 62, 80);
}
.quoteMachine {
  margin: 100px auto 0 auto;
  padding: 40px 60px;
  max-width: 600px;
  min-height: 225px;
  border-radius: 5px;
  background-color: white;
}
.theQuote {
  text-align: center;
  font-size: 30px;
  color: rgb(44, 62, 80);
}
.quotetationMarks {
  font-size: 60px;
  font-weight: 600;
}
.quoteAuthor {
  text-align: right;
  font-size: 20px;
  color: rgb(44, 62, 80);
}
.twitterButton {}

<div class="quoteMachine">
  <div class="theQuote">
    <blockquote><span class="quotetationMarks">&ldquo;</span > They call me Mister Tiibs <span class="quotetationMarks">&rdquo;<span></blockquote>
      </div>
      <div class="quoteAuthor">
        - hello
      </div>
      <button class="twitterButton"></button>
      <button class="newQuoteButton"></button>
      
      
    </div>

Run codeHide result

Answer 1

Since they spanare inline elements, you can add vertical-align: middle;in .quotetationMarks, and this will lead them to the middle of the rest of the line.

position: relative; top: 10px;, .

Answer 2

, vertical-align: sub; .quotetationMarks - , ?

fontawesome, . → http://fontawesome.io/icon/quote-right/

Answer 3

. vertical-align: middle; - , . , .

---

/ , " ".

, . ( , , .)

MDN:

, , . , -:: first-line , .

::before :

:: before , . . .

, , , , ::before.

: http://codepen.io/cam5/pen/kkxpbX,

<!-- quote HTML -->
<blockquote>
    <span class="quotationMark quotationMark--left"></span > 
        They call me&hellip;<br /> Mister Tiibs 
    <span class="quotationMark quotationMark--right"></span >
</blockquote>

CSS:

/* quote css */
.quotationMark {
  position: relative;
}

.quotationMark--left::before,
.quotationMark--right::before {
  font-size: 60px;
  font-weight: 600;
  position: absolute;
  top: -15px;
}

.quotationMark--left::before { 
  content:"\201C"; 
  left: -45px;

}
.quotationMark--right::before { 
  content:"\201D"; 
  right: -45px;
}

CSS Tricks , ISO CSS content: https://css-tricks.com/snippets/html/glyphs/

, .quotationMark display: relative; , top, right, left (), position: absolute; .