Using span::before, can a span within a paragraph be vertically positioned within that paragraph?

Question

Is there a way to vertically align a span, declared within a paragraph, and align the top of the span with the top of the paragraph?

<p> lots of text <span data-pullquote="special text">special text</span></p>

better fiddle here https://jsfiddle.net/HeavyThumper/e4e01p0h/

Is this possible without altering the paragraph styles - or requiring another container?

Answer 1

UPDATE

As far as CSS goes, there are ways to move the pullquotes to the top of the paragraph, unfortunately, properties like position , transform:translate , etc. takes the pullquote out of the flow thereby disabling the float property. The result is the pullquote moved at the top, but also mixed into the text instead of the text flowing around it. padding-bottom doesn't work because it disrupts the text below the pullquote. The only solution that I can think of that'll require the least preparation and work is using JavaScript.

Add the following to the end of your JavaScript:

var pq = document.querySelectorAll('span[data-pullquote]');
var pqArray = Array.prototype.slice.call(pq);
for (var i = 0; i < pqArray.length; i++) {
  var para = pqArray[i].parentElement;
  var pqHTML = pqArray[i].outerHTML;
  para.removeChild(pqArray[i]);
  para.insertAdjacentHTML('beforebegin', pqHTML);
}

Here's a working demo:

FIDDLE

---

OLD

Does it look like this? https://jsfiddle.net/zer00ne/rzeqo7qz/ I moved the <span> to the top and made it a <q> for semantics, but a <blockquote> would probably be better.