Best way to surround an HTML <q> element with single quotation marks-CodePudding

On using the HTML element, I want quotes to be displayed with 'single quotation marks' instead of "double quotation marks", as is standard practice in British English.

Markup:

<q>a bad system will beat a good person every time.<q>

Result: "a bad system will beat a good person every time."

Desired Result: 'a bad system will beat a good person every time.'

What is the most elegant way to solve this? I am thinking of a CSS rule for quotation marks. How does one write that?

CodePudding user response：

If you inspect the <q> element you will see that the quotes are generated by pseudo-elements. Simply change them to whatever text or symbol you like.

q::before {
  content: "'";
}

q::after {
  content: "'";
}

<q>a bad system will beat a good person every time.</q>

CodePudding user response：

A "messy" alternative, containing character escapes, to the answer already provided.

&lsquo;a bad system will beat a good person every time.&rsquo;