Having difficulty getting the h1:after element to properly float to the left and center

Question

Having difficulty getting the h1:after element to properly float to the left and center

I am facing an issue with the styling of a :after class that creates a line under a floated h1 element. The h1 element is floated left, and I want to center the :after line underneath it.

Despite floating it left and attempting a text-center on the parent div, I have not been successful. Any suggestions?

Check out the Codepen here

.singleAfterLine {
  display: block;
  float: left;
  height: 2px;
  background-color: #55B4B0;
  /*Great way to give single line color; see under GET FOOD NOT FAST FOOD */
  content: " ";
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

<div class="container-fluid greyBck" style="margin-top: 100px;" id="about">
  <div class="" style="padding-top: 50px; padding-bottom: 50px;">
    <div class="row" style="width: 80%; margin-left: 10%;">
      <div class="col-12 col-md-5">
        Duis faucibus, magna eu sodales viverra, nunc erat ullamcorper nibh, at varius leo ipsum eleifend lorem. Nam eu consectetur odio. Curabitur dolor libero, congue luctus gravida vitae, laoreet nec dolor. Donec sagittis lobortis odio, id hendrerit nunc molestie
        sagittis. Nam nec purus sapien. Nunc est purus, mattis ac magna maximus, pulvinar sodales lacus. Praesent eget pulvinar justo, in sodales arcu. Integer vel sagittis libero, id condimentum enim. Quisque sollicitudin tempus nibh pellentesque condimentum.
        Curabitur in posuere sem. Nulla aliquam in turpis ut molestie. In eu quam est.
      </div>
      <div class="col-12 col-md-7 bioText" style="float: left;">
        <h1 style="padding-bottom: 20px;">About Myself</h1>
        <span class="singleAfterLine"></span>
      </div>
    </div>
  </div>
</div>

html css

Answer 1

Answer №1

To achieve the desired result, you must make adjustments to the css

.bioText h1 {
        padding-bottom: 20px;
        display: inline-block;
        position: relative;
    }
.bioText h1:after {
        display: block;
        float: left;
        height: 2px;
        background-color: #55B4B0;
        content: " ";
        width: 100px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        position: absolute;
        left: 0;
        top: 50px;
        right:0px;
    }

<div class="container-fluid greyBck" style="margin-top: 100px;" id="about">
  <div class="" style="padding-top: 50px; padding-bottom: 50px;">
    <div class="row" style="width: 80%; margin-left: 10%;">
      <div class="col-12 col-md-5">
        Duis faucibus, magna eu sodales viverra, nunc erat ullamcorper nibh, at varius leo ipsum eleifend lorem. Nam eu consectetur odio. Curabitur dolor libero, congue luctus gravida vitae, laoreet nec dolor. Donec sagittis lobortis odio, id hendrerit nunc molestie sagittis. Nam nec purus sapien. Nunc est purus, mattis ac magna maximus, pulvinar sodales lacus. Praesent eget pulvinar justo, in sodales arcu. Integer vel sagittis libero, id condimentum enim. Quisque sollicitudin tempus nibh pellentesque condimentum. Curabitur in posuere sem. Nulla aliquam in turpis ut molestie. In eu quam est.
      </div>
      <div class="col-12 col-md-7 bioText" style="float: left;">
        <h1>About Myself</h1>
      </div>
    </div>
  </div>
</div>

Answer 2

To achieve the desired result, you must make adjustments to the css

.bioText h1 {
        padding-bottom: 20px;
        display: inline-block;
        position: relative;
    }
.bioText h1:after {
        display: block;
        float: left;
        height: 2px;
        background-color: #55B4B0;
        content: " ";
        width: 100px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        position: absolute;
        left: 0;
        top: 50px;
        right:0px;
    }

<div class="container-fluid greyBck" style="margin-top: 100px;" id="about">
  <div class="" style="padding-top: 50px; padding-bottom: 50px;">
    <div class="row" style="width: 80%; margin-left: 10%;">
      <div class="col-12 col-md-5">
        Duis faucibus, magna eu sodales viverra, nunc erat ullamcorper nibh, at varius leo ipsum eleifend lorem. Nam eu consectetur odio. Curabitur dolor libero, congue luctus gravida vitae, laoreet nec dolor. Donec sagittis lobortis odio, id hendrerit nunc molestie sagittis. Nam nec purus sapien. Nunc est purus, mattis ac magna maximus, pulvinar sodales lacus. Praesent eget pulvinar justo, in sodales arcu. Integer vel sagittis libero, id condimentum enim. Quisque sollicitudin tempus nibh pellentesque condimentum. Curabitur in posuere sem. Nulla aliquam in turpis ut molestie. In eu quam est.
      </div>
      <div class="col-12 col-md-7 bioText" style="float: left;">
        <h1>About Myself</h1>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

Should the centering focus be on the entire h1 or just its text? To effectively center the h1, you need to determine the width of the text within it. If you prefer to center the h1 as a whole, the process is much simpler. In cases where dynamic centering is needed, it's helpful to have a static reference point (such as its parent container). Create a separate container with the same dimensions as the h1's text and perform the alignment within that container using flex properties. Alternatively, for centering the line with the entire h1, utilize the flex property since the div's width will adjust dynamically based on its parent's width, similar to the behavior of an h1.

.singleAfterLine {
  display: block;
  float: left;
  height: 2px;
  background-color: #55B4B0;
  /*Great way to give single line color; see under GET FOOD NOT FAST FOOD */
  content: " ";
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.container {
  width: 200px;
  /*assuming the h1's text width is 200px, omit this if you want it to center with the whole h1*/
  display: flex;
  align-items: center;
  float: left
}

<div class="col-12 col-md-7  bioText" style="float: left;">
  <h1 style="padding-bottom: 20px;">About Myself</h1>
  <div class="container">
    <span class="singleAfterLine"></span>
  </div>
</div>

Answer 4

Should the centering focus be on the entire h1 or just its text? To effectively center the h1, you need to determine the width of the text within it. If you prefer to center the h1 as a whole, the process is much simpler. In cases where dynamic centering is needed, it's helpful to have a static reference point (such as its parent container). Create a separate container with the same dimensions as the h1's text and perform the alignment within that container using flex properties. Alternatively, for centering the line with the entire h1, utilize the flex property since the div's width will adjust dynamically based on its parent's width, similar to the behavior of an h1.

.singleAfterLine {
  display: block;
  float: left;
  height: 2px;
  background-color: #55B4B0;
  /*Great way to give single line color; see under GET FOOD NOT FAST FOOD */
  content: " ";
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.container {
  width: 200px;
  /*assuming the h1's text width is 200px, omit this if you want it to center with the whole h1*/
  display: flex;
  align-items: center;
  float: left
}

<div class="col-12 col-md-7  bioText" style="float: left;">
  <h1 style="padding-bottom: 20px;">About Myself</h1>
  <div class="container">
    <span class="singleAfterLine"></span>
  </div>
</div>

Answer 5

Answer №3

Let's start by correcting the usage of :after. You don't need to include a <span> element under the <h1>.

<h1>Introduction</h1> 


 h1:after {
    display: block;
    height: 2px;
    background-color: #55B4B0;
    content: " ";
    width: 100px;
    position: absolute;
    bottom: 10px;
}

h1 {
    padding-bottom: 20px;
    position: relative;
}

Answer 6

Let's start by correcting the usage of :after. You don't need to include a <span> element under the <h1>.

<h1>Introduction</h1> 


 h1:after {
    display: block;
    height: 2px;
    background-color: #55B4B0;
    content: " ";
    width: 100px;
    position: absolute;
    bottom: 10px;
}

h1 {
    padding-bottom: 20px;
    position: relative;
}

Having difficulty getting the h1:after element to properly float to the left and center

Answer №1

Answer №2

Answer №3

Similar questions

Having Trouble Accessing Full Website Source Code with Selenium and Python

Unique twist on the Bootstrap grid: perfectly centered

Why isn't the image showing up as a list style?

Adjust the header width and column alignment when freezing the header in a gridview interface

What steps can I take to prevent my menu items from overlapping in the mobile navigation menu?

JavaScript failing to retrieve JSON information from PHP

jQuery not getting desired response from AJAX GET request

Adding data into a SQL Server database using HTML controls

Modifying Copyright Feature in Footer

Is there a way to modify the background shade of an HTML meter element?

What is the best way to reduce the height of the navbar in Bootstrap 4?

Tips on changing the text alignment in ant design's Select with search field component within a Form item to support various languages

How can you identify if JavaScript is turned off without relying on the noscript tag?

The focus state persists even after the DOM element has been modified

Adjust the height of the div container and implement a vertical scroll feature on the fixed element

How come my DHTML navigation bar is displaying incorrectly in Internet Explorer 7?

Arrangement of Phone Numbers in RTL Orientations

Prevent the insertion of HTML elements into the DIV using jQuery

Center the content within a div by utilizing either the auto or percentage values

Struggling with setting up a search bar for infinite scrolling content