Вот обычный заголовок с подчеркиванием
.promo_title h1 {
display: inline;
padding: 8px 0;
text-transform: uppercase;
font-size: 36px;
line-height: 40px;
color: #2c2c2c;
position: relative;
letter-spacing: 2px;
width: 100%;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
}
.promo_title h1:after {
content: "";
width: calc(100% - 40px);
height: 1px;
background-color: #2c2c2c;
position: absolute;
bottom: 0;
left: 20px;
}
<div class="promo_title">
<h1>Мужская коллекция</h1>
</div>
При ресайзе получается вот так.
Как сделать так чтобы нижнее подчеркивание было под двумя словами всегда?