transformプロパティを用いて矢印を作成する際に、ぼやけてしまうのを解消したい。

CSSのtransformプロパティを用いて、丸の中に矢印が入っているアイコンを作成しようと考えております。

以下に添付しているHTMLとCSSで記述したのですが、「画面表示」の画像のように、矢印の先の部分が横棒と比較するとぼやけてしまう状態になっています。

【画面表示】

html
1<span class="p-arrow-icon"></span>

css
1*, *::before, *::after {
2    box-sizing: border-box;
3}
4
5.p-arrow-icon {
6    display: inline-block;
7    position: relative;
8    border: 1px solid #1d60d3;
9    border-radius: 50%;
10    height: 32px;
11    width: 32px;
12    background: #1d60d3;
13}
14
15.p-arrow-icon::before {
16    content: '';
17    display: block;
18    left: 5px;
19    position: absolute;
20    top: 15px;
21    height: 1px;
22    width: 50%;
23    background: #fff;
24}
25
26.p-arrow-icon::after {
27    content: '';
28    display: block;
29    position: absolute;
30    right: 10px;
31    top: 11px;
32    transform: rotate(45deg);
33    border-top: 1px solid #fff;
34    border-right: 1px solid #fff;
35    height: 25%;
36    width: 25%;
37}

調べる中で、以下のような解決策を試したのですが、改善されませんでした。
矢印をHTMLとCSSのみで作成する場合に、ぼやけない方法があればご教示いただきたいです。
そもそも細かなものをHTMLとCSSのみで作成しない方がよい、という場合も、その旨をご教示いただけると幸いです。

何卒よろしくお願いいたします。

【試したこと】
・「p-arrow-icon::after」に「backface-visibility: hidden;」
・「p-arrow-icon::after」に「image-rendering: -webkit-optimize-contrast;」
・「p-arrow-icon::after」に「filter: blur(0);」

【使用しているブラウザ】
Google chrome