CSS vertical-align on an :after element -

here's i'm working with:

<div class="page-header">     <h1>about us</h1>      ::after /* <-- illustrate :after */ </div> 

and here's styling (it's scss, if you're not used seeing nested styling.):

.page-header{     display: table;     width: 100%;     vertical-align: middle;     padding-right: 2em;      h1{       display: table-cell;       min-width: 156px;       vertical-align: middle;     }      &:after{       display: table-cell;       content: "";       width: 86%;       border-top: 3px solid #635c4d;       vertical-align: middle;     } } 

for reason, can't seem :after element align vertically in middle. stays @ top. ideas? in advance.

like this?

i think need ::after , content in css

.page-header{      display: table;      width: 100%;      vertical-align: middle;      padding-right: 2em;  }  .page-header  h1{      display: table-cell;      min-width: 156px;      vertical-align: middle;  }    .page-header::after{      display: table-cell;      content: "::after";      width: 86%;      border-top: 3px solid #635c4d;      vertical-align: middle;  }

<div class="page-header">      <h1>about us</h1>      <!-- illustrate :after */ -->  </div>