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

Angular's jQuery timepicker allows users to easily select a

Transitioning from jQuery to Angular, we previously utilized the for selecting times due to Firefox not supporting HTML5 input time. While searching for a similar timepicker plugin for Angular to maintain consistency with our past data and styles, I came ...

javascriptjqueryangularjshtml

Failing to hide a div on hover: Hoverintent's shortcomings

When I hover over the div with the unique identifier id="navbar", it doesn't seem to trigger any actions. I have included the following script in my document head: <script type="text/javascript" src="https://ajax.googleapi ...

javascripthtmljqueryhoverintent

What are some tips for getting media queries to function properly?

I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someo ...

css

Issues arise when attempting to determine the accurate dimensions of a canvas

Looking at my canvas element: <canvas id='arena'></canvas> This Element is set to fill the entire website window. It's contained within a div Element, both of which are set to 100% size. I attempted running this script: var c ...

javascripthtmlcsscanvaselement

Discovering a deeply nested div or class using Beautiful Soup

Recently, I came across this URL: All I want to do is extract the zestimate and include it in a list. The specific class where it's located is: class="Text-c11n-8-65-2__sc-aiai24-0 eUxMDw". I attempted to target it at a higher level in th ...

pythonhtmlpandasbeautifulsoup

Tips for generating AJAX requests directly from HTML documents

Hey there! I'm fairly new to JavaScript and have a question that might seem silly to some. How exactly can I invoke a function from a Coffeescript file within my HTML code? I'd like to give users the option to choose the language in which they v ...

javascriptjqueryhtmlajaxcoffeescript

Make sure link opens in the same window/tab

Currently, I am utilizing the Open Link in Same Tab extension on Google Chrome. This extension can be found here. The purpose of this extension is to ensure that all links open in the same window/tab, which is necessary for touch screen kiosk left/right s ...

javascriptjqueryhtmlgoogle-chromekiosk

Select a specific element to apply a CSS selector for a button

One of the challenges I am facing involves a webpage with multiple submit buttons. My goal is to iterate through each button and click on them one by one. While I am aware that this can be achieved using xpath like this (//button[@class='submit' ...

javahtmlcssseleniumcss-selectors

Codeigniter's email functionality struggles to successfully deliver HTML-rendered content to Yahoo and LiveMail

Our codeigniter site utilizes the CI mail library to send emails. While Gmail displays the emails properly formatted, Hotmail and Yahoo only show the raw HTML code. The HTML template is called from a file named: emailer_temp.php <!DOCTYPE> < ...

phphtmlcodeigniteremail

Create a visually appealing DataGrid cell by incorporating a vibrant colored oval with text or an icon inside

I'm in need of assistance with the mui/x-data-grid plugin. My goal is to display a cell within the grid containing both text and an icon, based on the value of the text. Unfortunately, I have been unable to achieve this so far. Here is the link to the ...

htmlreactjsmaterial-ui

Activate a change or response when the input value in Javascript is altered

Currently, I am working on a small project using JQuery and facing an issue when trying to remove error classes from HTML elements. To handle the removal of the error classes, I am utilizing $('selector').on('input') event to target th ...

javascriptjqueryhtmlevent-handling

Utilize API or alternative methods for analyzing Instagram data

My master's thesis requires me to dissect multiple Instagram profiles, each containing over 1000 posts. I am in need of a comprehensive list including the following details: Type of Post (Image, Multi Image, Video) Description Likes Comments (total c ...

htmlapiinstagramanalyticsinstagram-api

Achieving a frosted glass effect for your background without relying on a background image

I am currently working on creating a modal window in React with a blurred backdrop. My goal is to blur the backdrop content while keeping the background image clear, as there is no image behind the modal window, just content. I have explored various soluti ...

htmlcssreactjssass

Replacing Bootstrap CSS with a custom stylesheet

Within my bootstrap.css file, the following styling is defined: .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; ve ...

htmlcsstwitter-bootstrap

The naming convention for CSS classes could be defined as follows: .sa-list li a > div{

As I dive into a CSS example, one particular section of code catches my eye: .sa-list li label > span, .sa-list li h3 > span, .sa-list li h4 > span, .sa-list li a > div{ position:relative; display:table-cell; vertical-align:middle; ...

css

Creating movement in an SVG patterned background

Currently in the process of designing a brand new website using NextJS and Tailwind. I am looking to incorporate an infinitely translating background effect that moves towards the bottom right, similar to this example (but with my own unique pattern): htt ...

htmlcssreactjssvgnext.js

Sequentially loading Bootstrap columns as the page loads

Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this: setTimeout(function() { $("#box1").removeClass("noDisplay"); },1000); setTimeout(function() { ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to locate a specific button in jQuery?

How can I determine if the target of a click event is a button element in a document? $(document).click(function(e){ if(e.target.nodeName.toLowerCase() === 'button') { // Do something } Is the code above correct for this purpose ...

jqueryhtml

Damaged background in Bootstrap interface modal

https://i.stack.imgur.com/nTAnK.png Is there anyone who can assist me in identifying the issue causing the broken or irregular backdrop in the background of overlays or pop-ups? $scope.Modal = $modal.open({ animation: true, ...

cssangularjsangular-ui-bootstrapbootstrap-modal

What is the best way to adjust the size of a Div slideshow using

I need help with creating a slideshow that covers my webpage width 100% and height 500px. The image resolution is 1200*575. Can someone assist me with this? CSS #slide{ width : 100%; height: 500px; } HTML <!DOCTYPE html> <html> ...

javascriptjqueryhtmlcss