矢印の上の部分が欠けてしまう、、、（arrow）

矢印の上の部分が欠けてしまうんですがどこが原因なのでしょうか。

html
1   <section>
2     <div class="container-lg">
3       <div class="section-wrapper">
4       <div class="section-title">
5         <h2>News</h2>
6         <a href="..." class="arrow_r">View more</a>
7       </div>
8   </section>

css
1.section-wrapper{
2  background: transparent;
3}
4.section-title{
5  display: flex;
6  justify-content: center;  /*  中央揃え https://qiita.com/nom0523/items/85ffdb75fc759ee37528  */
7  position: relative;
8}
9section{
10  margin-top: 120px;
11}
12h2{
13  font-family: "Adobe Garamond Pro";
14  font-weight: normal;
15  font-size: 36px;
16  letter-spacing: 0.05em;
17  line-height: 50px;
18  margin: 0;
19  text-align: center;
20  color: #444;
21  padding-bottom: 9px;
22}
23.arrow_r {
24  position: relative;
25  display: inline-block;
26  padding-left: 20px;
27  text-decoration: none;
28  position: absolute;
29  right: 0;
30}
31.arrow_r:before {
32  content: '';
33  width: 6px;
34  height: 10px;
35  border: 0;
36  border-top: solid 2px #A6ADB4;
37  border-right: solid 2px #A6ADB4;
38  position: absolute;
39  top: 50%;
40  left: 0;
41  margin-top: -4px;
42  transform: rotate(45deg);
43}
44.section-title a{
45  font-family: "Adobe Garamond Pro";
46  font-weight: normal;
47  font-size: 14px;
48  line-height: 50px;
49  text-align: left;
50  color: #444;
51}

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

回答1件

ベストアンサー

CSS
1.arrow_r:before {
2  content: '';
3  /*width: 6px;*/
4  width: 10px;
5  height: 10px;
6  border: 0;
7  border-top: solid 2px #A6ADB4;
8  border-right: solid 2px #A6ADB4;
9  position: absolute;
10  top: 50%;
11  left: 0;
12  margin-top: -4px;
13  transform: rotate(45deg);
14}