How to make the closing quote mark follow the text?-CodePudding

I've tried to design a quoting text, but I've faced a problem which is that my closing quote mark doesn't follow the text when I shrink the viewport's window width, so how can I make it do that?

Thank you,

The code:

blockquote {
  position : relative;
  }
blockquote p:before { 
  content     : "\201C";
  font-weight : bold;
  font-size   :4.44rem;
  color       :#e48c3e;
  position    : absolute; 
  top         : -33px;
  left        : -40px;
  font-family : 'Playfair Display SC', serif;
  }
blockquote p:after { 
  content     : "\201D";
  font-weight : bold;
  font-size   :4.44rem;
  color       :#e48c3e;
  position    : absolute; 
  bottom      : -58px;
  right       : -38px;
  font-family : 'Playfair Display SC', serif;
  }

The output:

description

CodePudding user response：

According to the code you have shared, just replace the position with margin (adjust according to your needs) and it will solve your problem, and or if it doesn't share the complete code

CSS

.p {
        font-size: 43px;
     }
              .p:before { 
             content: "12";
             font-weight: bold;
             font-size:2rem;
             color:#e48c3e;
             margin: 0;
             font-family: 'Playfair Display SC', serif;
         }
         .p:after { 
             content: "32";
             font-weight: bold;
             font-size:2rem;
             color:#e48c3e;
             margin: 12px;
             font-family: 'Playfair Display SC', serif;
         }

CodePudding user response：

It'd be easier to know HTML and how the font is set on :root to see if there's a global default font and the font-size body since that's what the rem bases itself on.

But I believe your main problem is that your <p> is the parent of the ::before and ::after pseudo-elements so the <p> should have position: relative. Also, it'd be much more responsive if the lengths were relative units (ex. percentage, em, rem, ch) instead of an absolute value like px.

In the example below I guessed at the :root and body (don't even know if they exist in your code). The <q> replaces <p> and <p> is wrapped around paragraphs.

:root {
  font: 2ch/1 'Segoe UI'
}

body {
  font-size: 2ch
}

q {
  display: block;
  position: relative;
}

blockquote q:before {
  content: "\201C";
  font-weight: bold;
  font-size: 4.44rem;
  color: #e48c3e;
  position: absolute;
  top: -0.5ch;
  left: -1ch;
  font-family: 'Playfair Display SC', serif;
}

blockquote q:after {
  content: "\201D";
  font-weight: bold;
  font-size: 4.44rem;
  color: #e48c3e;
  position: absolute;
  bottom: -1.25ch;
  right: -1ch;
  font-family: 'Playfair Display SC', serif;
}

<blockquote>
  <q>
<p>Babybel cheeseburger manchego. Swiss cheeseburger fromage cream cheese mascarpone cheese on toast jarlsberg pepper jack. Cream cheese cheese and wine ricotta manchego cheesy feet pepper jack emmental bocconcini. Cauliflower cheese rubber cheese croque monsieur port-salut mozzarella stinking bishop red leicester.</p>

<p>Smelly cheese mozzarella cheese triangles. Emmental chalk and cheese fondue monterey jack cut the cheese cow cheese and biscuits cauliflower cheese. Croque monsieur queso melted cheese brie monterey jack fromage frais ricotta. Cheese bocconcini. Cut the cheese.</p>
</q>
</blockquote>