Avoid space around css pseudo elements

[Martien]

I assume this is a very specific edge case. I #daretoask anyway.

I need a <div class="context"> to start with …, seamlessly followed by its text, e.g. like so:

…the distribution of towns required to make a balanced region

So in style.css I have:

.context::before,
{
    content: "…";
    display: inline;
    margin: 0;
    margin-block: 0;
    margin-inline: 0;
}
div.context > p {
    display: inline;
    margin: 0;
    margin-block: 0;
    margin-inline: 0;
}

However, this renders space between … and text because Framework seems to generate:

<div class="context">
    <p>aloha</p>
</div>

I can get rid of the space by removing any white space between the <div> and the <p>, like so:

<div class="context"><p>text</p></div>

But as the html is generated, there seems to be nothing that I can do (apart from generating it myself, e.g. using a Page Loader).

How to get rid of that space?

P.S. all the margin settings may be superfluous.

[mbostock]

Presumably the technique you’re using is Markdown within opening and closing HTML blocks, like this:

<div class="context">

aloha

</div>

In this case, you can’t prevent the whitespace from being introduced around the resulting paragraph elements. But, you could apply the pseudoelement to the first child instead of the container:

<style>

.context > :first-child::before {
  content: "…";
}

</style>

Alternatively, you can avoid Markdown and instead using a single HTML block. Then you can control the generated HTML more precisely and avoid the undesired whitespace. But you won’t be able to use Markdown within the container.

<div class="context"><p>aloha</p></div>

[Martien]

Thanks so much! Works like a charm. 🎉

Also used in .constitution > :first-child::after which now ends with spaceless ellipsis as well.

For reference, see:

1. https://github.com/Martien/aarde/blob/main/src/pl-container.md; and its current rendering on
2. http://aarde.aardrock.nl/pl-container

Perhaps also of interest is the list of patterns generated with a Page Loader:

1. http://aarde.aardrock.nl/pl, generated by:
2. https://github.com/Martien/aarde/blob/main/src/pl.md.js, from
3. https://github.com/Martien/aarde/blob/main/src/pattern-names.txt

BTW, not sure it is about HTML blocks as you mention. My experience is that the superfluous spaces and new lines between the two elements mess it up. Then again, that may be about HTML blocs as well; don’t know.

[mbostock]

Then again, that may be about HTML blocs as well; don’t know.

It is. You can study the Markdown spec 😅 if you want to understand why.