flexのspace-betweenで3列に並べた要素の文頭を揃えたい

前提・実現したいこと

画像のように、二行の二列目の文頭を一行目と揃えたいのですがうまくいきません。
一行目はflexのspace-betweenで両端揃えにしてます。
中央の「テスト2」の両端にだけ隙間をあけたいので、nth-childでpadding指定しています。

該当のソースコード

HTML
1      <ul>
2        <li><a href="#">テスト1です</a></li>
3        <li><a href="#">テスト2</a></li>
4        <li><a href="#">テスト3です</a></li>      
5        <li><a href="#">テスト4</a></li>
6        <li><a href="#">テスト3です</a></li>
7      </ul>

css
1ul {
2  display: flex;
3  flex-wrap: wrap;
4  justify-content: space-between;
5  max-width: 350px;
6}
7
8ul li {
9  display: inline-block;
10}
11
12ul::after {
13    display: block;
14    content:"";
15    width: 30%;
16} 
17
18ul li:nth-child(2) {
19  padding: 0 30px;
20}
21

試したこと

同じpadding指定を5列目にも指定すれば（ul li:nth-child(5)）どうにかなるかと思ったのですが、
指定するとよくわからない位置に文字が移動してしまいました。

行動規範の内容に同意します

回答1件

ベストアンサー

下記のような感じでどうでしょう。
3列なので幅を33%にする。

css
1ul {
2  display: flex;
3  flex-wrap: wrap;
4  justify-content: space-between;
5  max-width: 350px;
6}
7
8ul li {
9  display: inline-block;
10  width: 33%;
11}
12
13ul::after {
14  display: block;
15  content:"";
16  width: 33%;
17}