Align Double Quotes along the text

Question

wanted to know how can text and quotes be aligned together.

tried absolute and relative positioning but then the text was not centered aligned.

p{
  max-width: 1200px;
  background: #135527;
border: 7px solid #135527;
border-radius: 56px;
  width: 40%;
  font-family: 'Nunito Sans';
font-style: normal;
font-weight: 900;
font-size: 32px;
line-height: 44px;
text-align: center;
padding: 20px;
  margin: 30px auto;
color: #FFFFFF;
}


p::before {
    content: open-quote;
  font-family: 'Amarante';
font-style: normal;
font-weight: 400;
font-size: 85px;
color: #FFFFFF;
  padding: 80px 0 0 10px;
}
p::after {
    content: "\201E";
  font-family: 'Amarante';
font-style: normal;
font-weight: 400;
font-size: 85px;
color: #FFFFFF;
}

<p>Healthy living is making yourself feel at home by creating a home where your body & mind thrive.</p>

This is what Im trying to achieve.

Thank you for your help

Don't reinvent the wheel, [use the css `quotes` tagg](https://developer.mozilla.org/en-US/docs/Web/CSS/quotes) — 0stone0, Dec 22 '22 at 09:41
@0stone0 This should be the correct answer. Please post it as an answer to vote for it — nourhomsi, Dec 22 '22 at 09:51
No, thats not how SO works, this question should be deleted or closed as an obvious duplicate. — 0stone0, Dec 22 '22 at 10:02

score 1 · Accepted Answer · answered Dec 22 '22 at 09:39

p {
  position: relative;
  max-width: 1200px;
  background: #135527;
  border: 7px solid #135527;
  border-radius: 56px;
  width: 40%;
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  font-size: 32px;
  line-height: 44px;
  text-align: center;
  padding: 20px;
  margin: 30px auto;
  color: #FFFFFF;
}

p::before {
  position: absolute;
  top: 0.35em;
  left: 0.1em;
  content: open-quote;
  font-family: 'Amarante';
  font-style: normal;
  font-weight: 400;
  font-size: 85px;
  color: #FFFFFF;
}

p::after {
  position: absolute;
  bottom: 0.5em;
  right: 0.1em;
  content: "\201E";
  font-family: 'Amarante';
  font-style: normal;
  font-weight: 400;
  font-size: 85px;
  color: #FFFFFF;
}

<p>Healthy living is making yourself feel at home by creating a home where your body & mind thrive.</p>

p position relative, before and after absolute

Play with top, left in before and with bottom, right in after to have exactly position you want.

Values here in em, but you can put px

Unfortunately this isn't responsive - a narrow viewport has the quotes intersecting with the text — A Haworth, Dec 22 '22 at 09:46

score 0 · Answer 2 · answered Dec 22 '22 at 10:09

p{
  max-width: 1200px;
  background: #135527;
border: 7px solid #135527;
border-radius: 56px;
  width: 40%;
  font-family: 'Nunito Sans';
font-style: normal;
font-weight: 900;
font-size: 32px;
line-height: 44px;
text-align: center;
padding: 20px;
  margin: 30px auto;
color: #FFFFFF;
}


p::before {
content: open-quote;
    font-family: 'Amarante';
    font-style: normal;
    font-weight: 400;
    font-size: 85px;
    color: #FFFFFF;
    padding: 0px 0 0 0px;
    margin-bottom: 0px;
    position: relative;
    top: 20px;
    left: -10px;
}
p::after {
    content: "\201E";
    font-family: 'Amarante';
    font-style: normal;
    font-weight: 400;
    font-size: 85px;
    color: #FFFFFF;
    position: relative;
    top: 0px;
    right: -10px;
}

<p>Healthy living is making yourself feel at home by creating a home where your body & mind thrive.</p>

Add position: relative to ::before and ::after selectors and give them a top, left or right attribute to position the quotes.

Align Double Quotes along the text

2 Answers2