doppelte Anführungszeichen in CSS

Question

Ich habe ein Design, das ich versuche, in HTML und CSS zu replizieren.

In diesem Moment, kann ich dies in fiddle zu bekommen, aber ich bin nicht in der Lage doppelt Anführungszeichen zu replizieren, wie im Design gezeigt.

Der HTML-Code, den ich für den zweiten Absatz verwende ist:

<div id="line2" class="col-lg-12"> 
        <div class="cofounder-ceo-image"> 
         <img src="assets/img/Uploads/jack_v1.jpg"> </div> 
        <p>Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say Whatever you say </p> 

        <p class="ceo">Jack Lau - Co-founder and CEO</p> 
       </div> 

Ich frage mich, ist es eine Möglichkeit, doppelte Anführungszeichen in CSS replizieren können oder einfach nur brauchen wir ein Bild von Doppel posten Anführungszeichen an einem bestimmten Ort?

Answer 1

Sie können das Pseudoelement ::after verwenden. Fügen Sie nach jedem Absatz die Anführungszeichen hinzu und positionieren Sie sie auf der gewünschten Seite. Dieser Code ist nur für den ersten Absatz (nur auf der rechten Seite), aber Sie können leicht eine wiederholbare Klasse erstellen, eine für jede Seite, nur die Eigenschaften right und left entsprechend ändern. Etwas wie folgt aus:

#line2 p { 
    position: relative; 
} 
#line2 p:after { 
    content: "\""; 
    position: absolute; 
    top: -50px; 
    right: -100px; 
    font-size: 140px; 
    color: gray; 
} 

Wenn Sie das genaue "inverted comma", die genau die gleiche Schriftart wie Ihr Beispiel verwenden, oder einfach ein Bild:

#line2 p:after { 
    content: url(https://i.stack.imgur.com/wyH2G.png); 
    position: absolute; 
    top: -70px; 
    right: -100px; 
    font-size: 140px; 
    color: gray; 
} 

Fiddle

Answer 2

Sie verwenden könnten psedoemements (::after und ::before) um ein Element an ein anderes Element wie dieses anzuschließen:

.our-vision p{ 
    position: relative; 
} 

.our-vision #line2 > p::before, 
.our-vision #line3 > p::after{ 
    position: absolute; 
    font-size: 5em; 
    color: #ccc; 
} 

.our-vision #line2 > p::before{ 
    content:"\201D"; 
    top: -0.5em; 
    right: -0.5em; 
} 

.our-vision #line3 > p::after{ 
    content:"\201C"; 
    bottom: -0.5em; 
    left: -0.5em; 
    } 
} 

Fiddle: https://jsfiddle.net/ttfwchq3/3/

jedoch, was Sie hier scheint (obwohl in umgekehrter Richtung) wie ein blockquote entwerfen. Wenn das der Fall ist, möchten Sie vielleicht ein Blockquote-Element formatieren und es so verwenden.