wie man Zitat-Symbol mit Linien getrennt

Question

Ich muss dieses Ding in css Code, so bin ich irgendwie fest.

Und mein Code sieht wie folgt aus:

          
  
 
   
 
    
 .quotation { 
 
     @extend .col-lg-12; 
 
     color:#d8b063; 
 
     font-style: italic; 
 
     text-align: center; 
 
     border-top: 1px solid #d8b063; 
 
     border-bottom: 1px solid #d8b063; 
 
     padding: 50px 0; 
 
     margin-bottom: 48px; 
 

 

 
     blockquote { 
 
      font-size: 22px; 
 
      font-family: "Georgia", sans-serif; 
 
      padding: 0; 
 
      margin: 0; 
 
      border: 0; 
 
     } 
 
     
 
     p { 
 
      font-size: 17px; 
 
      margin-top: 27px; 
 
     } 
 
     
 
     }
 
    
<div class="quotation"> 
 
    <img><img src="/assets/quote.png" alt="Quote sign" /></img> 
 
    <blockquote>The tipping point is that magic moment when an idea, trend, or social behavior crosses a threshold, tips, and spreads like wildfire.<p>Malcolm Gladwell</p></blockquote> 
 
    </div>
 
   
 
  
 
 

 

ich ein Problem habe, wie Symbol zurück zu ziehen den Rücken so zentriert auf der ersten Linie und von den Leitungen getrennt. Ich denke, ich kann das zum Beispiel mit margin: -120px tun, aber ich weiß jetzt nicht, wie ich den Rest mache.

Answer 1

Haben Sie versucht, pseudo-elementbefore zu verwenden?

quotation { 
    @extend .col-lg-12; 
    color:#d8b063; 
    font-style: italic; 
    text-align: center; 
    border-top: 1px solid #d8b063; 
    border-bottom: 1px solid #d8b063; 
    padding: 50px 0; 
    margin-bottom: 48px; 


    .quotation:before { 
     content: url("/assets/quote.png"); 
     display: inline-block; 
     height: 22px; 
    } 
    ... 

    }