JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div class="wrapper">
  <div class="content">
    <h1>Positioning content in pseudo-elements absolutely relative to inline elements</h1>
    <h2>This technique could be a nice way to offer extra content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div class="accent" data-meta="This content should align with the top of the span in which it is defined.">Cras ut nisl euismod</div>, molestie arcu eget, suscipit nulla. Nam in aliquet elit. Curabitur mollis dolor diam, ut congue velit elementum ac. Quisque at metus malesuada, egestas justo sit amet, pellentesque ex.</p>
    <h2>Unfortunately it doesn't work with multline content</h2>
    <p>Pellentesque ultrices sed quam pellentesque, eu ultricies nulla semper. <span class="accent" data-meta="Unfortunately it is aligned with the last line of said span.">Etiam leo ligula, laoreet eget urna et, dignissim facilisis nisi ante.</span> Duis gravida lectus tellus, sed rutrum nisi ultricies a. Aliquam pellentesque ante at ipsum convallis porta.</p>
    <h2>Not a problem at all with :before</h2>
    <p>Aliquam mi arcu, rhoncus at velit in, pharetra condimentum neque. Etiam vel metus vel justo viverra vulputate. <span class="accent accent--before" data-meta="This is not a problem at all using :before &mdash; but sometimes that plainly not possible.">Nunc sed elit laoreet, mattis ante eu, dignissim ipsum risus.</span> Cras in lobortis quam. Sed vitae nisl sem. Vivamus in justo vel sapien pharetra interdum in porta mi.</p>
    <h2>Also works with relative positioning of the parent</h2>
    <p>Mauris aliquet in purus a mollis. <span class="accent accent--relative" data-meta="But it creates ugly holes in the text-flow.">Aliquam euismod ipsum sit amet sapien justo  elit egestas, eu condimentum ante viverra.</span> Proin leo ligula, mollis vitae dolor quis, varius consequat nisl. Aliquam mollis dui a nibh vehicula, tempor rhoncus nibh auctor. Donec sed ante et nisl laoreet pharetra sit amet sed nulla. Sed ac...

SCSS

/* Basic typo (not problem related) */
body {
  font-family: Georgia, serif;
  font-size: 82.5%;
  line-height: 1.167;
  color: #555;
}

h1, h2 {
  color: #222;
}

h1 {
  font-size: 1.167em;
}

h2 {
  font-size: 1em;
}

/* Problem related styles */

.wrapper {
  position: relative;
  width: 580px;
  margin: 2em auto;
}

.content p {
  width: 62.069%;
}

.accent {
  color: cornflowerblue;
  &:before,
  &:after {
    position: absolute;
    right: 0;
    width: 31.035%;

  }
  &:after {
    content: attr(data-meta);
  }
}

.accent--before {
  &:before {
    content: attr(data-meta);
  }
  &:after {
    content: none;
  }
}

.accent--relative {
  position: relative;
  display: inline-block;
  &:after {
    top: 0;
    left: 111.11%;
    width: 50%;
  }
}