Using content with the before psuedo selector to force new line

Question

Normally something like this will force the .free-entry element onto a new line...

.free-entry:before {
    content: '\A';
    white-space: pre;
}

But I've run into a case where I can't get it to work.

I have an unordered list and within each li there is a .free-entry element. I'm trying to force the .free-entry element onto a new line but with no luck...

li .free-entry:before {
    content: '\A';
    white-space: pre;
}

Normally display:block would work just fine, but li is display:table-row so block doesn't work.

li {
    display:table-row;
}

Here is a fiddle for more clarity.

See [CSS to line break before/after a particular `inline-block` item](http://stackoverflow.com/questions/4609279/css-to-line-break-before-after-a-particular-inline-block-item) and [To What Self-Closing Elements Can ::before and ::after Pseudo-Elements be Applied](http://stackoverflow.com/q/26633229/1529630) — Oriol, Jan 07 '15 at 23:09

score 0 · Accepted Answer · edited May 23 '17 at 12:20

The reason that this doesn't work is that .free-entry is an input element.

Pseudo elements are not supported on replaced elements of which input is one.

Hence .free-entry:before {...} does nothing.

See this post for more details

As a workaround to this you could place an :after pseudo element on the label like so:

label:after {
    content: '\A';
    white-space: pre;
}

FIDDLE

li {
  display: table-row;
}
label:after {
  content: '\A';
 white-space: pre;
}

<ul>
  <li>
    <input type="checkbox" value="Other" name="choosemanytest_other[5]" checked="" />
    <label>Other</label>
    <input type="text" class="free-entry" value="A Tiger" />
  </li>
</ul>

I think what I'll do is wrap the `input` with a `span`. Thank you for your explanation. I searched but couldn't come up with anything substantial like your answer, probably because I didn't know what to search for. — bflemi3, Jan 08 '15 at 02:09

Mouhamad Kawas · Answer 2 · 2015-01-08T00:38:23.300

-1

Hey I think you can solve it by changing the free-entry to a display: block

li .free-entry {
        display: block;
}

edited Jan 08 '15 at 00:38

answered Jan 07 '15 at 23:03

Mouhamad Kawas

370
2
12

Using content with the before psuedo selector to force new line

2 Answers2