How to make "Semantic Quotes" with the q tag, but it being with a different font-family

Question

How to make "Semantic Quotes" with the q tag, but it being with a different font-family

Navigation

#1 by (2 votes)

3

The question is very simple and objective, I want to have a font style for the paragraph and another style that font for the quotes, however when I put the content between the tag <q> what's inside takes the font-family of <q> and loses the font-family of <p> .

For clarity, see the example.

p {
  font-size: 32px;
  font-family: serif;
}
q {
  font-family: sans-serif;
}

<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

The part of the text that is surrounded by the <q> tag is with the font-family other than <p> , but I want only the quotation marks, not the whole text from within the

I do not want to use direct quotes in the text body, it has to be with the tag <q> , this would not have value ok ... "texto" ...

How can I solve this problem semantically using the <q> tag and so that I can reuse it in other parts of the text?

html css

asked by anonymous 06.09.2018 / 21:23

1 answer

R code optimization Req and Res in nodejs, problem in understanding arguments

score 2 · Accepted Answer

One way to do this is by setting the font-family to only differentiated for pseudo-elements after and before of tag q :

p {
  font-size: 32px;
  font-family: serif;
}

q:before {
  content: open-quote;
  font-family: sans-serif;
}
q:after {
  content: close-quote;
  font-family: sans-serif;
}

<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

With this, only the quotation marks will have font-family different. The content that is within <q> has the same source as <p> .

Remembering that if q has specific rules, pseudo-elements will also have them:

p {
  font-size: 32px;
  font-family: serif;
}

/* q com regras específicas, serão aplicadas em before e after */
q {
  color: red;
}
q:before {
  content: open-quote;
  font-family: sans-serif;
}
q:after {
  content: close-quote;
  font-family: sans-serif;
}

<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

In this case, before and after inherit the red color set to q . If this is not what is desired, it would be enough to define a different color in pseudo-elements:

p {
  font-size: 32px;
  font-family: serif;
}

/* q com regras específicas */
q {
  color: red;
}
q:before {
  content: open-quote;
  font-family: sans-serif;
  /* sobrescrever a cor definida em q */
  color: black;
}
q:after {
  content: close-quote;
  font-family: sans-serif;
  /* sobrescrever a cor definida em q */
  color: black;
}

<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

Reference: MDN