Quiero realizar una animación (que aparezca una barra desde la izq); el elemento after esta sobre el padre de .content-tittle__tittle(cuando este elemento este en estado hover se tiene que realizar al animaccion). 

Se que la solucion mas facil poner el width: 100% sobre el elemento padre --anim

Pero si hay una forma de lograr cambiar el width de --anim cuando "content-tittle__tittle" este en hover seria una gloria. 

   

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .--anim::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 0;
        height: 1px;
        background-color: black;
        transition: width 0.5s ease-in-out, left 0.5s ease-in-out; }

        /* .--anim:hover::after {
        width: 100%;} */


        .content-tittle__tittle:hover{
        .--anim::after & {
          width: 100%;} }
      

        .--animToLeft::after {
        left: 0;}

<!-- language: lang-html -->

     <section class="containerDT">
              <div class="content-tittle --anim --animToLeft">
                <h2 class="content-tittle__tittle">Actividades</h2>
                <h3 class="content-tittle__parroquia">Comunidad Centro</h3>
              </div>
        <section>



<!-- end snippet -->