Trouble getting h1:after to float left and center - html

Question

I have a :after class that creates a line under a h1 element. The h1 element is floated left and what I am trying to do is make the :after line float left but also center under the h1.
I floated it left and tried to do a text-center on the parent div, to no avail. Any ideas?
Codepen
.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>

Answer 1

You need to change some css to get this
.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

Center on the whole h1? or center on the h1's text? You have to know what is the width of the text in the h1 if you want to center it on that text. but if you want to center it in the whole h1, its much simpler. In my experience whenever there is dynamic centering involve, you should have a reference which has a static value (maybe its parent, or the parent of its parent or so on..), Make another container with the same size as the h1's text, then you do the line inside that container. You use flex to center the line. But if you want to center the line with the whole h1. You can achieve it just by doing the flex, as the div's width will dynamically occupy its parent width similar to the behavior of 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 3

First of all :after is not written like that.No need for <span> below <h1>
<h1>About Myself</h1>
h1:after {
display: block;
height: 2px;
background-color: #55B4B0;
content: " ";
width: 100px;
position: absolute;
bottom: 10px;
}
h1 {
padding-bottom: 20px;
position: relative;
}