Is it possible to start each line of an inline element with a given character?

Question

I am trying to emulate a style of quotations that was used in old books. The quotation would be inline, but each line of the quotation would have an open quote at the beginning, like follows:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, "sed do eiusmod tempor incididunt ut labore
" et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
" ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
" irure dolor in reprehenderit in voluptate velit esse" cillum dolore eu fugiat nulla pariatur.

I've managed to make this work if the quotation is a block element, as follows:

<blockquote style="position:relative; overflow:hidden; ">
  <div style="position:absolute; ">"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br></div>
  <div style="position:relative; left:1em; width:90%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</blockquote>

My question is, is it possible to have this type of effect if the quotation is inline? Further, is it possible to do it using ONLY inline CSS, since the site I am doing it on only allows modification of inline CSS?

Clave

Did you consider using border-image? – Marybethmaryellen

Jonathan Sampson's answer is better than mine. You should mark his answer as accepted instead of mine. – Warton

Thank you for your kind recommendation, @DanielF. – Pressley

Answer 1

With a Pseudo-element (with-out solution below)

You can, sort of, but it's messy. The best approach I can think (that is CSS-alone) is to use a pseudo element, and multiple text-shadows. One down-side to this is that it assumes the opening " is always on the first line of the blockquote:

blockquote {
    overflow: hidden;
    line-height: 1em;
    position: relative;
    padding-left: .85em;
    text-indent: -.85em;
}

blockquote::before {
    content:"\22";
    position: absolute;
    top: 1.15em; left: .85em;
    text-shadow:
        0 1em 0 #000, 0 2em 0 #000, 0 3em 0 #000,
        0 4em 0 #000, 0 5em 0 #000, 0 6em 0 #000;
}

You can play with it a bit further here: http://jsfiddle.net/nx296yc8/1/

Without a Pseudo-element

You could inline all of this if you're willing to forego the pseudo-element:

<blockquote style="overflow: hidden; line-height: 1em; position: relative; padding-left: .85em; text-indent: -.85em">
    <span style="position: absolute; top: 1.15em; left: .85em; text-shadow: 0 1em 0 #000, 0 2em 0 #000, 0 3em 0 #000, 0 4em 0 #000, 0 5em 0 #000, 0 6em 0 #000">&quot;</span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse" cillum dolore eu fugiat nulla pariatur.
</blockquote>

Pressley

The problem is, you are only allowed to use inline CSS. Still, this answer is useful for people stumbling here through Google who don't have that OP's constraints. – Warton

This can be done inline, if the author is willing to do away with pseudo-elements: – Pressley

I provided two approaches; the second doesn't use pseudo elements. – Pressley