CODEWITHSUNDEEP
css
Zisztoll G
Zisztoll G

Reputation: 13

CSS::before pushes text to the right, how to avoid/override?

I want to use the css property ::before to add a tag before a paragraph. I manage to render the tag correctly, but it pushes the text in the paragraph to the right. I want to avoid this as the tag will be placed in the top-left corner of the paragraph and the text should come under the tag.

I looked at w3schools to try to find out how it is done.

I also tried looking at the website I saw the design, but couldn't figure out how it worked. Heres the website link: Fetch API
The thing I'm tried to do is done under section 2.1 URL on that website.

.note {
    background-color: #C7FDBC;
    padding: 0.6em;
    margin-left:1em;
    margin-top: 2em;
    margin-bottom: 1.5em;
}

.note::before {
    content: "Note";
    background-color: green;
    color: white;
    font-weight: bold;
    padding: 0.4em;
    position: relative;
    top: -1.6em;
    left: -1.3em;    
}

<p class="note">The note</p>

Expected result is something looking like the notes in the fetch api. My result looked similar, just that the paragraph text is pushed to the right by the same amount as the width of the ::before content.

Upvotes: 1

Views: 1320

Answers (2)

Michael Cordingley
Michael Cordingley

Reputation: 1525

The ::before pseudo element is functionally a child element of whatever element it is applied to. In your case, this would be something like <p class="note"><::before>Note</::before>The note</p>

The solution is to establish .note as a positioning context with position: relative and then position the before pseudo-element where you want it with position: absolute.

Upvotes: 1

laptou
laptou

Reputation: 7039

If you don't want your ::before pseudo-element to affect the flow of other elements, then give it position: absolute. In order to make this absolute positioning relative to the <p>, you must give the <p> a position other than static: I'll use relative here.

This works because the ::before pseudo-element is treated as a child of your <p>:

body
{
  padding: 1em;
}

.note {
    background-color: #C7FDBC;
    padding: 0.6em;
    margin-top: 2em;
    margin-bottom: 1.5em;
    position: relative;
}

.note::before {
    content: "Note";
    background-color: green;
    color: white;
    font-weight: bold;
    padding: 0.2em;
    position: absolute;
    top: -1.4em;
    left: -1.1em;    
}
<p>This is text before the note. See how the left edge of this text is aligned with the left edge of the note?</p>
<p class="note">This is the note.</p>
<p>This is text after the note. See how the left edge of this text is aligned with the left edge of the note?</p>

Note: (see what I did there?)

Since this approach prevents the overlay from affecting the layout of the elements, the overlay will get clipped by the edge of the page unless it is padded (which is why I added some padding to the <body>).

Upvotes: 2

Related Questions