CSS - Borde inferior de la mitad o menos

<h1>TITULO DE LA SECCION</h1>

h1 {

  font-weight: 300;

  display: inline-block;

  padding-bottom: 5px;

  position: relative;

}

h1:before{

    content: "";

    position: absolute;

    width: 50%;

    height: 1px;

    bottom: 0;

    left: 0%;

    border-bottom: 1px solid red;

}

<h2 class="medio-subrayado">TITULO DE LA SECCION</h2>