css underline text only with arrow centered - css

Question

i'm trying to underline my text with an additional arrow centered on the ligne.
when doing this i can't center my text in the page.
.souligne {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display: inline-block;
}
.souligne:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 5em;
color: #00a7a8;
}
<h2 class="souligne" style="text-align:center;">THIS IS MY HEADER</h2>
The text is not centered when doing this.
.souligne {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display: inline-block;
}
.souligne:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 5em;
color: #00a7a8;
}
<h2 class="souligne" style="text-align:center">THIS IS MY HEADER</h2>
<br>
<center><h2 class="souligne">THIS IS MY HEADER</h2></center>
so when using style="text-align:center" in H2 it doesn't center the text, it works only when using <center>.

Answer 1

You can set h2 to inline-block, and change position of before pseudo-element to 50% se negative margin to half of the arrow and it will be always center fit with title length
h2 {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display:inline-block;
}
h2:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 50%;
margin-left:-12px;
color: #00a7a8;
}
<h2>The Header Is Here</h2>

Answer 2

OK so based on the #Renato Hoxha help, this is what finaly worked for my project.
.souligne {
color: #ea942f;
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #ea942f;
position: relative;
display: table;
margin-left: auto;
margin-right: auto;
}
.souligne:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 50%;
color: #ea942f;
}
<h2 class="souligne">THIS IS MY HEADER</h2>