How can I prevent or override the text being pushed to the right by CSS::before?

Using the css property ::before, I am attempting to insert a tag before a paragraph. While I am able to display the tag correctly, it is causing the text within the paragraph to be shifted to the right. Ideally, I would like the tag to appear in the top-left corner of the paragraph with the text positioned beneath it.

In my search for a solution, I referred to w3schools for guidance.

I also explored the website where I found the desired design, however, I was unable to comprehend the underlying technique. The link to the website is: Fetch API. The specific feature I am trying to replicate can be found under section 2.1 URL on this 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>

The desired outcome resembles the notes layout in the fetch api. While my result bears similarities, the text within the paragraph is being displaced to the right by an amount equal to the width of the content inserted using ::before.

css

Answer №1

To ensure that your ::before pseudo-element does not impact the positioning of surrounding elements, apply position: absolute to it. For the absolute positioning to be in relation to the parent <p>, set a position other than static for the <p>; in this case, I've used relative.

This method functions effectively as the ::before pseudo-element is considered a child within the <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 text comes before the note. Notice how it aligns with the left side of the note?</p>
<p class="note">Here's the note.</p>
<p>This text comes after the note. Notice how it lines up with the left edge of the note?</p>

Note: (clever, right?)

By following this procedure, you prevent the overlay from affecting the layout of neighboring elements. However, without adding some padding (as seen on the <body>), the overlay may get cut off at the page edge.

Answer №2

The ::before pseudo element acts as a virtual child of the element to which it is attached. For example, you could use it like this: 

<p class="note"><::before>Note</::before>The note</p>

To solve this issue, you need to define .note as a reference point for positioning by setting its position property to relative, and then position the before pseudo-element using position: absolute.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scrolling to specific ID scrolls only in a downward direction

I have been using fullpage.js for my website and I am facing an issue. When I create a link and connect it to an id, everything works perfectly. However, I am unable to scroll back up once I have scrolled down. Here is the HTML code: <a href="#section ...

javascripthtmlcssonepage-scroll

Setting a div's width to cover 100% of the screen's width

I'm currently working on creating a 2 column layout using divs. The left column has a fixed size of 150 px, while the right column should extend to the right boundary of the browser. I've tried using both width:auto and width:100% values for the ...

csshtml

Having trouble accessing CSS images in JSF

Issue Details : I am currently facing a problem with setting menu background images in my JSF application using CSS properties. The file structure is as follows This is the CSS snippet Style.css #menu { height:35px; width:950px; backgrou ...

cssjsfjsf-2

using mixins with styled-components

I have encountered a challenge while attempting to pass a mixin from Material UI to a styled-component. The problem lies in finding a way to transfer the mixin value to the styled-component without having to assign it to a css property. Unfortunately, dire ...

cssmaterial-uistyled-components

The HTML body is given a right margin for proper spacing

Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...

htmlcsstwitter-bootstrapbootstrap-5

Having trouble getting the JavaScript slider to animate

My code works perfectly in Codepen but when I try to implement it on my website, it shows as a static image. You can view the code here: https://codepen.io/anon/pen/zPMKpv I'm using the exact same code on my website located at: Does anyone have any ...

javascripthtmlcss

Looking to replicate a Modal that I designed, but unsure which elements need altering in order to achieve this. I am hoping to create three duplicates of the Modal

This modal is functioning perfectly, and now I want to replicate the same modal three times on a single page. I require three distinct buttons on the same page to trigger these separate modals. At this point, I am unsure which attributes need modification ...

javascripthtmljquerycssmodal-dialog

What are the steps to adjusting page margins for Kindle devices?

While converting an HTML page for Kindle, I encountered a problem with multiple CSS files. The Kindle Guide recommends setting the left and right margins to 0 for normal body text in order to prevent content from falling off the edge of the screen or overl ...

csshtmlkindle

Disordered block elements

I am having trouble centering a div in my footer. When I try to center it, the div ends up floating on top of the footer instead. Here is the link to the codepen. footer { text-align: center; background-color: grey; position: fixed; bottom: 0; width: 100 ...

htmlcss

Ways to showcase your style using Bootstrap

Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered. For a clearer explanation, pl ...

htmlcssbootstrap-5

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

cssreactjstypescriptnext.jstailwind-css

Show a notification on the screen if the source of the iframe is blank

Is there a way to show a message "Please click on a match to get started" when no match link has been clicked? For example, when the iframe does not have an src attribute. My backend is built on Django. Below is the HTML code snippet: </form><b ...

htmljquerycssdjangoajax

The Perfect Scrollbar feature is not functioning properly in conjunction with the accordion menu

I am having some trouble with implementing the Perfect Scrollbar alongside an accordion slider menu. The scrollbar is not working as expected, and you can view the fiddle here. On initial page load, the scrollbar only appears for the first sub-menu aft ...

javascriptjqueryhtmlcssaccordion

Is the menu not appearing in the header section of the HTML/CSS?

Hey there, I'm a new student diving into the world of HTML/CSS. I've been working on creating a page layout, but for some reason my menu links are appearing under the header section instead of within it. I'm a bit confused and could really u ...

htmlcsscss-selectors

What is the best way to create an index for a user-provided value in a textbox

Looking for guidance on how to set an index to user-provided values in a textbox, append them to a table in a new row, and display that index in the first column of every row. I am unfamiliar with this type of functionality. $(document).ready(function() ...

javascriptjqueryhtmlcss

Issues with retrieving the subsequent anchor element using Jquery Slider

(Apologies for the lengthy post. I like to provide detailed explanations.) Just starting out with Jquery, trying my hand at creating a custom image slider from scratch. Got the slider working with fade effects using this code: Javascript: $(document).re ...

javascriptjquerycssslideranchor

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

I have a group of five bootstrap navigation tabs that are evenly spaced and visually appealing on desktop screens. However, when viewed on a mobile device, the text within the tabs becomes cramped together. How can I make the tabs stack vertically on mobil ...

htmlcsstwitter-bootstrap

Ways to incorporate design elements for transitioning focus between different elements

When focusing on an element, I am using spatialNavigation with the following code: in index.html <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb5acf2acafbeabb6beb3f2b1bea9b6 ...

javascripthtmlcssreactjssass

HTML Multi-Column List Box

Can a List Box be created with List Items displayed in Multiple Columns? I know there are other options available, but I'm curious if this is achievable using the <select> tag ...

javascriptjqueryhtmlcss

what is the best way to change background image in media query for various screen sizes?

I have a customized email template with a background image. The size of the image is 600px (width), and I have applied a class called back-img for styling purposes. I am looking to override this class specifically for all mobile screen sizes, including lan ...

htmlcssresponsive-designmedia-queries