John_911 John_911 - 1 month ago 5
CSS Question

Possible to force children on new line but keep child behavior like inline-block? See code for clarification



<div class="content">
This is the content
<span class="contentTag">
#
<span>tag1</span>
</span>
<span class="contentTag">
#
<span>tag2</span>
</span>
</div>

<br>
<br>
<br>

<div>This is how I want it (can't change html structure though, pure css only)</div>
<span>#tag1</span>
<span>#tag2</span>





So I'm trying to style a website that I visit often by injecting css using a chrome extension. So I can't change the html structure and injecting js isn't practical as the site is heavily dependent on js and changes the markup often.

Desired

This is the content
#tag1 #tag2


I've been trying for the past half hour, but can't figure it out with just CSS. It has to stay dynamic though, since there might be more tags and they should all fit on the second line (within reason, of course if I had 20 tags it's going to go onto a third or maybe fourth line).

Is this possible with just CSS?

EDIT!!!

Sorry everyone. The markup is a little different. I didn't notice. Its updated above in the code snippet

Answer

You can add the before selector to the first child span like so:

.content span.contentTag:first-child:before {
    content:"";
    display: block;
}