Exploring the differences between pseudo-elements when styled as display:block versus display:inline

I'm currently honing my CSS skills by following a Youtube tutorial from freecodecamp.org

Here's the code I've been working on:

p::before{
  content: "hello ";
  color: white;
  font-size: 60px;
  background: salmon;
  margin-bottom: 20px;
}

p::after{
  display: block;
  content: "";
  height: 100px;
  width: 100px;
  background: green;
}
<p>Before and after pseudo elements</p>

When adding 'display: block' to the p::after pseudo-selector, the result is as expected:

https://i.sstatic.net/lEgx5.png

However, when omitting the 'display: block' property, the green box disappears completely:

https://i.sstatic.net/JVKPM.png

Can anyone shed some light on why this happens? I thought the box would still appear inline after the text but it vanishes instead...

Thanks in advance for any guidance.

Sincerely, Sohaib

htmlcss

Answer №1

Next, apply the CSS property display: inline-block

If elements are set to display: inline, then explicit dimensions cannot be applied to them - it will not have any impact. Consequently, since the pseudo element lacks substantial content, it will appear with 0 dimensions and therefore remain hidden.

Answer №2

Make sure to include the following in your CSS:

p::before{
  content: "hello ";
  color: white;
  font-size: 60px;
  background: salmon;
  margin-bottom: 20px;
}

p::after{
  display: inline-block;
  content: "";
  height: 100px;
  width: 100px;
  background: green;
}
<p>Before and after pseudo elements</p>

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

Ways to center text vertically within a cell in a Bootstrap 5 table

I am trying to achieve vertical alignment in one of the cells of a table I created. According to the Bootstrap 5 documentation, the vertical-alignment utilities only affect certain elements like inline, inline-block, inline-table, and table cell elements. ...

htmlcsstwitter-bootstrapbootstrap-5

Concealing the TinyNav Drop-Down Menu

Currently, I am utilizing TinyNav on my website and it is working wonderfully. However, due to our extensive menu system, the tinynav dropdown appears quite large. I have been attempting to figure out a way to hide all sub-menus without success. I experim ...

javascriptcssdrop-down-menumenusubmenu

How can I display data saved from step 2 in a multi-step form with 4 steps, when I return from step 3 to step 2?

Let's consider this scenario: Imagine the user is at step 2 and types their name into <input type="text" class="form-control input-xl" ngModel name="firstName"> They proceed to step 3 but then decide to return to step 2. The information entere ...

htmlangularjsangular

How can screen readers be alerted about freshly loaded content through ajax?

Whenever a user clicks on a button, I want to add more content to the page. The new content will be visually clear, but how can I ensure that screen readers can easily access it? I've come across two best practices that suggest additional steps may b ...

htmlajaxaccessibility

.comment {Visibility:hidden;} is only functioning on one specific page

What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...

phphtmlcsswordpress

Generate a new web component using JavaScript

My HTML table looks like this: <table id = "rpttable" name = "rpttable"> <thead> Column Headers here... </thead> <tbody id = "rptbody" name = "rptbody"> data here <3 .... </tbody> </table> And in my ...

javascriptjqueryhtml

Creating Flexible Designs - Implementing a responsive sidebar with dynamic scrolling

I am in the process of developing a simple web application that features a sidebar whose vertical size is dependent on the number of elements it contains. My goal is to make the web app responsive, ensuring it works well on devices of any size. In cases ...

htmlcssflexboxheightoverflow

Tips for eliminating choices upon button press

How do I remove nested options inside a select element upon button click? I'm not sure where my mistake is, could it be in the for loop? var select = document.getElementById('colorSelect'); var options = document.getElementsByTagName(&ap ...

javascripthtml

Creating a well-aligned form using Material-UI

Exploring Material-UI for the first time! How can a form be built where certain fields are arranged horizontally, others stacked vertically, and all aligned perfectly both vertically and horizontally? Check out this example image: https://i.sstatic.net/5R ...

javascripthtmlcssreactjsmaterial-ui

Press a button to navigate through a series of web pages

Currently, I am working on a website focused on profiles. The challenge I am facing is implementing fixed side buttons (SKIP and ADD) that will cycle through the list of profiles. I understand that I may need to create an array to store all the profiles, ...

javascripthtmlarraysbutton

Is it possible to embed HTML code within JavaScript strings?

Is my approach to inserting HTML into a JavaScript string correct? In particular, I want to insert an HTML link into a div tag using JavaScript. Here is the HTML: <div id="mydivtag"></div> And here is the JavaScript code: document.g ...

javascripthtmlhyperlinkdom-manipulation

Extract all class elements from HTML code and save them to a text file using PHP

Is there a way to extract all span elements with the class "msgsource" from my website's HTML code and then save it as a .txt file for downloading? I tried using the following code, but it only downloads an empty text file: <?php // Grabbing conte ...

phphtmldownloadsimple-html-dom

utilizing the entire string rather than just a portion

I was attempting to create a JavaScript jQuery program that vocalizes numbers based on some previously saved data. However, I encountered an issue where only the last number in the sequence was being played (the final character in the string). Below is t ...

javascriptjqueryhtml

Unable to make a POST request using axios

I'm having trouble populating a table using vue.js and axios in my visual studio project. Every time I run the solution, I see an empty table with just the heading Title. I experimented with another POST request method but unfortunately, it didn&apos ...

c#htmljsonvue.jsaxios

When all y values are zero, Highcharts.js will shift the line to the bottom of the chart

Is there a way to move the 0 line on the y axis to the bottom of the chart when all values are 0? I attempted the solution provided in this post without success. Highcharts: Ensure y-Axis 0 value is at chart bottom http://jsfiddle.net/tZayD/58/ $(functi ...

javascriptjquerycsschartshighcharts

Securely Upload Files with JavaScript

Are there any methods to utilize javascript or ajax for encrypting file uploads securely? If so, could you provide a sample code snippet or direct me to a functional example? ...

javascripthtmlfileencryptionupload

Challenges with locating text within the innerHtml property of a VB WebBrowser Object

Using Visual Studio 2010 with Visual Basic.NET In my project, I have created a form that utilizes a WebBrowser control to load an HTML file. Users are able to search for specific words or phrases within the document, prompting me to extract the innerHtml ...

htmlvb.netvisual-studio-2010

What is the source of these additional pixels that appear when percentages are used for defining height?

I have been working on implementing a sticky footer that I've successfully used in the past for various websites. You can find the link to the original method here: However, this time I am facing a challenge as I want to make the footer more responsi ...

cssresponsive-designsticky-footer

Troubleshooting problem with JQuery window printing capability

After creating a paper with dimensions of 21.0 cm width and 29.7cm height, I encountered an issue where the printer output three papers instead of just two. I am not sure where I went wrong in my setup. You can find the source code here. window.print(); ...

jquerycssgoogle-chromeprintingwindow

AngularJS - How to Deactivate List Items

Currently, I am working on developing a breadcrumb navigation system using AngularJS. However, I am facing an issue where some of the links need to be disabled based on certain user requirements not being met. After researching the Angular documentation, ...

htmlangularjslistitemangularjs-ng-disabled