How to move the after element down so that it is even with the parent?

I have this snippet of code: a header that I have added four dots to using the "after" property.

.mastermega h1 {
    font-family: 'MagicRetro';
    color: #353935;
    font-size: 36px;
    margin-left: 5px;
}

.mastermega h1:after {
    position: relative;
    content: "• • • •";
    font-size: 75px;
    color: rgba(246, 139, 187, 0.8);
    margin-left: 30px;
} 

How do I force the dots down so that they’re even with the header text?

Header text with incorrectly placed dots

I have tried using "margin-top" but it doesn’t seem to do anything.

>Solution :

You can use display: flex and align-items: center to make it align with h1.

h1 {
  color: #353935;
  font-size: 36px;
  margin-left: 5px;
  display: flex;
  align-items: center;
}

h1:after {
  content: "• • • •";
  font-size: 75px;
  color: rgba(246, 139, 187, 0.8);
  margin-left: 30px;
  margin-top: 10px;
}

<h1>Family</h1>