How come the h2::after element is positioned directly beneath the main h2 element, and with a margin-bottom?

I'm puzzled as to why the margin-bottom property in the main h2 element isn't affecting its "::after" element. Both are defined as block elements, so one margin should provide enough space between them. Even though the "h2::after" element has 0 margin on top and bottom, I believe that because of the bottom margin of h2, there should be a 40px distance between them. However, they seem to stick together.

<html lang='en>'>
        <body>
            <h2>Main h2 heading</h2>
                <style>
                    h2 {
                        content: "main h2";
                        font-size: 180%;
                        margin-bottom: 40px;
                        word-spacing: 2px;
                        text-align: center;
                        color: #000;
                    
                    }
                
                    h2::after {
                        display: block;
                        background-color: #4cd137;
                        height: 5px;
                        width: 250px;
                        content: " ";
                        margin: 0 auto;

                    }
             
               </style>
        </body>
htmlcss

Answer №1

When styling elements like h2 and h2::after, it's important to remember that they are considered as a single element. This means that adding margin-bottom to h2 may not have the desired effect. Instead, try adding margin-top to the after element to create some spacing between them.

h2 {
  content: "main h2";
  font-size: 180%;
  margin-bottom: 40px;
  word-spacing: 2px;
  text-align: center;
  color: #000;
}
                
h2::after {
  display: block;
  background-color: #4cd137;
  height: 5px;
  width: 250px;
  content: " ";
  margin: 0 auto;
  margin-top:40px;
}
<h2>Main h2 heading</h2>

Answer №2

Padding properties are utilized to add space around elements, beyond any specified borders and not within inner elements... refer below for 2 possible solutions

h2, h3 {
  content: "main h2";
  font-size: 180%;
  padding-bottom: 40px;
  word-spacing: 2px;
  text-align: center;
  color: #000;
  position: relative;
  display: table;
  margin:auto;
}

h2::after {
  display: block;
  background-color: #4cd137;
  height: 5px;
  width: 100%;
  content: " ";
  margin: 0 auto;
  position: absolute;
  bottom: 0;
}

h3::after {
  display: block;
  background-color: #4cd137;
  height: 5px;
  width: 100%;
  content: " ";
  margin: 40px auto 0;
}


p{text-align: center;}
<p>Applied Position Effect</p>
<h2>Primary Heading</h2>
<br><br><br><br>
<p>Utilized Margin Feature</p>
<h3>Secondary Heading</h3>

Experimenting with hopes of success :)

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

Menu secured in place within the wrapper

My website is contained in a wrapper with a max width, and I have a fixed side menu that can be toggled with a button. The problem I am facing is keeping the fixed side menu within the page wrapper. Fixed elements are typically positioned relative to the ...

javascriptjqueryhtmlcss

Struggling to implement a Datepicker in the date column of a table created using HTML and JavaScript

I am encountering an issue while creating a table in html and javascript. I am unable to use a Datepicker in the date column when inserting a new row, even though it works fine when using in normal html code. Below is the javascript function: //Script fo ...

javascriptphpjqueryhtmlcss

Are there any pre-existing pop-up methods available for AngularJS?

Is there a way to create a simple pop-up window with static text and just one "Ok" button? In Java/Swing, it's possible to achieve this with just one line of code using pre-defined classes. However, when it comes to Angular pop-ups, it seems like the ...

javascripthtmlangularjs

Using a local function within Node.js and referencing it with the <%%> tag in a document

I am currently working with Node.js and attempting to utilize a local function within a document that requires the JSON I send in the res.render. Is there a method to achieve this? Below is an example of how I attempted to implement it: <%local_vari ...

javascripthtmlnode.js

What is the best way to delete a table that I created through my programming?

I have utilized the following code to create a table: <html> <head> <title>Table Time</title> </head> <body> <table border="1px"> <tr> ...

htmlhtml-table

What is the best way to add a CSS link if a request is not made using AJAX?

My webpage, 'foo.html', retrieves data from a database using AJAX ('ajax.html?options=option1') to populate a table. The table is styled nicely with CSS that is linked to 'foo.html'. However, I also want the ajax.html page to ...

htmlcssajax

The horizontal overflow is malfunctioning, resulting in only a limited number of columns being visible on the screen

I am facing an issue with the CSS for my table. Despite using overflow-x: scroll, only half of the columns are being displayed on the screen out of the 15 total columns. Can anyone provide assistance with this problem? .table { font-family: Roboto,"He ...

htmlangularcss

Retrieve information from a JSON API on one server and showcase it on an HTML page hosted on a different server

I have a situation where I need to transfer data from one project (Project1) to another project (Project2). To achieve this, I decided to convert the Project1 data stored in a database into a JSON API and then call it using an HTML page from Project2. Howe ...

javascriptjqueryhtmljson

What is the best way to make an element "jump to the top" when the parent element has reached its maximum height?

I have a parent div containing 6 child divs. The height of the internal divs changes dynamically based on the data. The outer div has a fixed height set. I want the internal divs to move to a new column inside the parent div when they no longer fit in term ...

htmljquerycss

Static Header - Halts Animation on Downward Scroll, Resumes when Scrolling Ceases

I've implemented a fixed menu on my website. Everything seems to be working fine, but here's the issue: When I scroll down and the fixed menu starts animating, if I continue scrolling quickly, the animation pauses. It only continues when I stop ...

javascriptjqueryhtmlcss

The labels assigned to buttons will direct users to unique links specifically designated for that button

I've been working on a website to share some code I created, but my skills in HTML and CSS are not the best. Please forgive me if there are obvious mistakes. Here's the code I have so far: <!DOCTYPE html> <html> <head> ...

htmlcssw3.css

The headline box is displaying CSS code instead of the content. How can this issue be resolved?

Having an issue with a WordPress template that features a blue "headline" box that I need to change the color of to #333399. I tried inspecting the element, browsing through the code, and identified the code below as what needed modification: #headline, # ...

csswordpress

Show detailed information in a pop-up window

Javascript $(function() { var dmJSON = "clues.json"; $.getJSON( dmJSON, function(data) { var idx=1; $.each(data.details, function(i, f) { var myid = 'mypop'+String(idx); idx++; var $popup="<popu ...

javascriptjqueryhtmljsonpopup

increasing the SQL integer value with padding

Is it possible to apply padding to certain INT return values retrieved from an SQL database using CSS within a div tag? I need specific numbers to have padding-left: 20px; while other specific numbers should have padding-right: 20px;. This presents a styl ...

phpcsssqlsorting

What is the proper way to leverage the global 'window' object within Angular?

I'm attempting to utilize the method "window["initMapCallback"]" to invoke and monitor for "initMapCallback" in a separate file. However, I am encountering an error message in the debugging console that states Query - How can I properly implement thi ...

javascripthtmlangularcallbackasynccallback

If the item has an active class, apply a new class to the parent element and all of its

If I have code like the example below and want to add the show class to the parent and ancestors. // The last `nav-item` has the `active` class <div class="nested-group nested-item show"> <div class="nested-item show"> <div class="n ...

javascriptjqueryhtmlcss

Tips for preventing a table from showing up while scrolling unnecessarily when utilizing a heading with the CSS position property set to 'sticky'

Currently, I am facing an issue with creating a sticky header for my table. The problem arises when the header of the table has rounded edges (top right and top left) along with a box-shadow applied to the entire table. As the user scrolls through the tabl ...

javascriptcssreactjs

A guide on integrating Javascript and CSS files in Express.js

I'm currently running a simple node server from a page.js file as part of a system setup test. Here's the code snippet: var express = require('express'); var app = express(); app.get('/', function(req, res) { res.sendFil ...

htmlnode.jsexpress

Material-UI React Native components: Injecting Styles without Props

import {createStyles, WithStyles} from "@material-ui/core"; const styles = (theme: Theme) => createStyles({ root: {} }); interface MyProps extends WithStyles<typeof styles> { } export class MyComponent extends Component<MyProps ...

cssreactjstypescriptreact-nativematerial-ui

Incorporate new content into JavaScript using the input element

I have a unique question - can text be added to JavaScript using the input tag? For example, <input type="text" id="example" /> And let's assume the JavaScript function is: function display_text() { alert("The text entered in #example wi ...

javascripthtmlforms