CSS How do I introduce a 'new line' that for all (variable content) that follows a span with a certain class?

Question

In this fiddle https://jsfiddle.net/zdkL1m9j/ I have text with enumerated spans like <span class="line_num">[29] </span>, <span class="line_num">[30] </span>, etc. Each span is followed by text and other span elements.

I'm trying to output a view where the content that begins with each span class="line_num" (the number [x] and subsequent text and elements) begin on a new line (but no 'new line' on the first row - adding brwill not solve this correctly).

This is all dynamically generated, and due to limitations in the processing, I cannot change the HTML output (or I would use li to solve this).

Thanks very much in advance.

I am not entirely sure what you are asking. Would adding a "display: block;" to your "line_num" class do the trick? — JJWillMC, Oct 29 '18 at 18:46
@Turnip that's just perfect! If you post this as an answer I'll accept. Thanks! — jbrehr, Oct 29 '18 at 18:48
The question has been asked before. I was just clarifying before closing. — Turnip, Oct 29 '18 at 18:49
Ok, I couldn't find a suitable answer in SO history but I wasn't using the right vocabulary it seems. Thanks. — jbrehr, Oct 29 '18 at 18:52

score -1 · Answer 1 · answered Oct 29 '18 at 18:48

-1

Have a look at my updated fiddle:

.document-diplo .line_num:not(:first-child):before {
  content: ' ';
  display: block;
}

You can find more details on the solution here.

answered Oct 29 '18 at 18:48

Tommy

2,355
1
19
48

If you are aware that a question is a duplicate, please do not answer it. And FYI, your selector is far more complex than it needs to be. – Turnip Oct 29 '18 at 18:56

CSS How do I introduce a 'new line' that for all (variable content) that follows a span with a certain class?

1 Answers1