position pseudo elements responsive to screen width and parent

Question

I'm creating a decoration for my header tags using pseudo elements. I have added a line using ::before and a circle using ::after . I have positioned it now by hardcoding the values. Due to this, the position of the elements change when the screen width changes.

body {
  font-family: 'Raleway', sans-serif;
  height: 100%;
  width: 100%;
  background-color: #f5f0e7;
}

.section-header {
  font-family: 'Lobster', cursive;
  display: inline-block;
  margin-bottom: 30px;
}

.section-header::before {
  background: #222222;
  content: "";
  height: 1px;
  position: absolute;
  width: 150px;
  left: 42%;
  bottom: 25%;
}

.section-header::after {
  background: #b4a28f;
  border: 5px solid #fff;
  border-radius: 20px;
  content: "";
  height: 24px;
  left: 49%;
  position: absolute;
  width: 24px;
  bottom: 10%;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<div class="container" style="padding-top: 100px;">
  <div class="row">
    <div class="col-md-12" style="text-align: center;">
      <h3 class="section-header">About Us</h3>
    </div>
  </div>
</div>

Please help me to :

1. make the position of the pseudo elements responsive to screen width such that it always stays in the middle of the content of the header tag.
2. if possible, to make the width of the before element expand as per the contents of the header tags

Also please let me know if it is possible to add animations to pseudo elements like the line spreading on both side from the circle in the middle.

EDIT: This question is regarding the positioning of pseudo elements. The one which is marked as original does not address anything regarding pseudo elements. However, one of the answers in that question tells how to use pseudo elements. But I am looking for one which enlarges with size.

Answer 1

Change Some CSS

.section-header {
  font-family: 'Lobster', cursive;
  display: inline-block;
  margin-bottom: 30px;
  position: relative;
}

.section-header::before {
  background: #222222;
  content: "";
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -20px;
  width:100%;
}

.section-header::after {
  background: #b4a28f;
  border: 5px solid #fff;
  border-radius: 20px;
  content: "";
  height: 24px;
  left: 50%;
  position: absolute;
  margin-left:-12px;
  width: 24px;
  bottom: -30px;
}

body {
  font-family: 'Raleway', sans-serif;
  height: 100%;
  width: 100%;
  background-color: #f5f0e7;
}

.section-header {
  font-family: 'Lobster', cursive;
  display: inline-block;
  margin-bottom: 30px;
  position: relative;
}

.section-header::before {
  background: #222222;
  content: "";
  height: 1px;
  position: absolute;
  left: -25%;
  bottom: -20px;
  width:150%;
}

.section-header::after {
  background: #b4a28f;
  border: 5px solid #fff;
  border-radius: 20px;
  content: "";
  height: 24px;
  left: 50%;
  position: absolute;
  margin-left:-12px;
  width: 24px;
  bottom: -30px;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<div class="container" style="padding-top: 100px;">
  <div class="row">
    <div class="col-md-12" style="text-align: center;">
      <h3 class="section-header">About Us</h3>
      </br>
      <h3 class="section-header">About Us About Us</h3>
    </div>
  </div>
</div>

.section-header::before {
  background: #222222;
  content: "";
  height: 1px;
  position: absolute;
  left: -25%;
  bottom: -20px;
  width:150%;
}