Gaurang Tandon Gaurang Tandon - 1 year ago 85
CSS Question

Custom bullet style using ::before - high gap between first two lines in text node


This is the problem:

enter image description here

This is my HTML:

<ol class="steps">
Select elements appear properly

Textareas appear properly
But text that spans multiple lines is displayed with high gap between first two lines. Try also adjusting the width of the output window to really small to see the effect.

I am using custom, ordered bullet lists. I tried replacing the textnodes with
s to no avail. Replacing with
added a weird line break between the

How to fix this problem?

UPDATE: this is the fixed fiddle. I had to remove the
style rule and use position absolute.

Answer Source

The second line of <li> text has to make room for the green counter that has been placed before the <li>. You can remove that space by adding position: absolute to .steps li:before but you'll have to fiddle the positioning.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download