Odd spacing on 'before'.

[gulliver]

For an instance where I’m using a p tag with an ‘overflow: hidden;’ so that text doesn’t wrap around a left-floated image, I’m trying to simulate a list with a fake bullet by using span.list::before {content: "\2022";}.

When using several <span class="list"><a href="LINK">Link</a></span><br />, the bullets are squashed against the text.

To get the normal spacing I have to write as

<span class="list">
<a href="LINK">Link</a></span><br />

[Beverleyh]

Can you demo it in CodePen? If we can see a basic demo of the problem, it will be easier for us to offer specific suggestions to fix it.

[gulliver]

Thanks.

Demo at: https://codepen.io/glvr/pen/XjKvmw.

Thinking more about this, it’s probably to be expected that the first-stated behavior is normal.

But I don’t know why a line-break should introduce additional spacing. I guess it’s just ‘one of those things’, and the fix is to use a right-margin to add desired space.

I only noticed this by accident, inadvertently spilling my code onto two lines rather than a single.

[Beverleyh]

It’s because new lines in HTML markup are interpreted as a space, so…

<span class="list">
<a href="LINK">Link</a></span><br />

…will generate the same output as…

<span class="list"> <a href="LINK">Link</a></span><br />

i.e., with a space between the opening span and the anchor.

However there is no such space here;

<span class="list"><a href="LINK">Link</a></span><br />

[gulliver]

Thanks.
I didn’t know about the white space thing.

[Mottie]

Try using

span.list::before 
{
content: "\2022\0a";
}

[gulliver]

@Mottie… Thanks. I didn’t know about that either. Seems a good way to avoid bothering with a margin-right.

[Author]

Posts