0

I have a problem similar to this, but not identical to it...

In my case I have the following layout:

<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
<span class="title">Title4:</span>
<span class="content">Content4</span>

Which is displayed like this:

Title1: Content1

Title2: Content2

Title3: Content3

Title4: Content4

with the help of the following CSS

span.title{
    font-weight: bold;
}

span.content::after {
    content: "\a";
    white-space: pre;
}

However, there will be a case where the first span.title will be orphan - not followed by a span.content but rather by another span.title. In that special case, I want the orphan span.title to be in its own line... So it will be like this:

Oprhan title

Title1: Content1

Title2: Content2

Title3: Content3

Title4: Content4

What's the correct rule to cover that :not() case?

I've tried quite many variations like the one below, but non seems to work...

span.title::after + :not(span.content) {
    content: "\a";
    white-space: pre;
}

Thanks a lot in advance!

EDIT: Basically, the more I think about this, the more I suspect it can't be solved in CSS... + operator selects the element after it, not before it...

Faye D.
  • 833
  • 1
  • 3
  • 16

1 Answers1

1

Could add the line break before the next line instead of after the orphaned title perhaps.

span.title{
    font-weight: bold;
}

span.content::after {
    content: "\a";
    white-space: pre;
}

span.title + :not(span.content)::before {
    content: "\a";
    white-space: pre;
}
<span class="title">Orphan Title</span>
<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
<span class="title">Orphan Title2</span>
<span class="title">Orphan Title3</span>
<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
abney317
  • 7,760
  • 6
  • 32
  • 56
  • And a very sly/brilliant approach also!!! Instead of adding the newline _after_ the orphan `span.title`, you add it _before_ the `span.title` that follows another (effectively orphan `span.title`)!!! I so much love such clever approaches!!! – Faye D. Jun 20 '21 at 11:59