Alternative formatting for inline quotation in Spanish - css

Question

Imaging this markup for a dialogue:
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
Now, to punctuated this paragraph base on Spanish grammar, the output must be:
—Come here! —he said—. Why is taking you so long?
(Notice the position of the em-dashes, the spaces around them, and the period in the description.)
Is there a pure-CSS solution to output this without changing the HTML?
[In English, the quotation marks surround the spoken text. In Spanish, however, after the initial em-dash (with no spaces around it) the description is the one being surrounded, by two em-dashed with no spaces in the inside.]

Answer 1

You can sort of fake the quotation marks with some psuedo elements, taking care of deleting the last one.
p{font-size:1.5em;}
q:before{
content: "— ";
}
q:after {
content: " —";
}
q:last-of-type:after {
content: "";
}
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
Moving the dot cannot be done with pure CSS, or I cannot think any way to do so atm. I believe you'll need to parse it either server-side or with some javascript
Edit:
Well, there might be a way, but this is ridiculously specific.
p{font-size:1.5em;}
q:before{
content: "—. ";
margin-left:-12px;
background:white;
}
q:first-of-type:before{
content: "—";
}
q:after {
content: " —";
margin-right:-4px;
}
q:last-of-type:after {
content: "";
}
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
That's pulling the dashes towards the clarification (in a px based arbitrary magic number, which depends totally on the selected font and it's size), then using background-color (which should match the true background) to paint over the actual dot liquid paper style, and adding the dot after the dash on each quote start that's not the very first.
So as I said, ridiculously specific, and fragile. The moment you change the font, font-size or background-color, or simply have a clarification that doesn't end on ". ", it will break.