Parent Div = Float Left. Child Div Not Display Text

Question

Итак, у меня есть родительский div (первый) с поплавком: слева. Мой дочерний div (hover-state) - это просто состояние зависания. У дочернего div есть 2 текстовых элемента и подчеркивание. Подчеркнуто, но текстовые элементы не отображаются. если вы посмотрите на jsfiddle и наведите указатель мыши на белый ящик, вы увидите, что я имею в виду.

 <div class="box one"> 
      <div class="hover-state"> 

       <h3>This Artist</h3> 
       <div class="line"></div> 
       <h4>some text</h4> 

      </div> 
     </div> 

https://jsfiddle.net/8fx9f6xb/

Answer 1

Вы font-size: 0 в .roster так делает наследование всех детей. Сброс кода, как это:

.roster > div { 
    font-size: 1rem; 
} 

Посмотри работает:

https://jsfiddle.net/8fx9f6xb/1/

Answer 2

Удалить font-size или изменить его. Это наследуется всеми детьми, и не появляется ничего:

.roster > div { 
    font-size: 10pt; 
} 

Fiddle: https://jsfiddle.net/fq0jsapb/