Estlização de lista de notícias

Estilos da lista de notícias do site Notícias Agrícolas

HTML

<div class="tn-noticias">
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}