li a{border-bottom: dotted 2px #dddddd;}がうまく機能しない

li a{border-bottom: dotted 2px #dddddd;}と書いていますが、下の画像のように「かきくけこ」の下に点線を引くことができません。仮にli{border-bottom: dotted 2px #dddddd;}を追加すると、「あいうえお」と「さしすせそ」の下の点線が2重線になってしまします。

どうすれば「かきくけこ」の下に点線を追加することができますか？

html
1<div class="box5">
2    <div class="news">
3      <h1>・お知らせ</h1>
4    <ul>
5      <li><a href="#">
6        <time datetime="2020-5-26">2020/5/26</time>
7        あいうえお
8        </a></li>
9      <li><time datetime="2020-5-25">2020/5/25</time>
10        かきくけこ
11      </li>
12      <li><a href="#"><time datetime="2020-5-15">2020/5/15</time>
13        さしすせそ
14      </a></li>
15    </ul>
16    </div>
17    </div>

css
1.news h1{margin-top: 0; margin-bottom: 5px; font-size: 18px; color: #666666;}
2.news ul {margin: 0; padding: 0; list-style: none;}
3.news li a{display: block; padding: 5px; color: #000000;
4           font-size: 16px; text-decoration: none; border-bottom: dotted 2px #dddddd;}
5.menu li a:hover{background-color: #eeeeee;}
6.news time{margin-right: 10px; color: #888888; font-weight: bold;}