<a>タグでブロックをかこった時のテキストデコレーション解除

前提・実現したいこと

html cssでリンク要素に入れたボックスを横に並べていっておせるようなものを作っています。ところが、ボックスの下（borderの下）にリンク要素によるとみられる青色のものが出てきています。この青色の部分を取り除きたいです。

発生している問題・エラーメッセージ

html
1<div class="inlinecontainer1">
2   <a href="structing.html" class="inlinecontent" id="inlinecontent1">
3    <img src="mainsecond.png" class="mainfirstpic">
4   </a>
5   <a href="structing.html" class="inlinecontent" id="inlinecontent2">
6    <img src="mainthird.png" class="mainfirstpic">
7    <p>キョダイマックスできるニャースを手に入れよう</p>
8    <div class="triangle"></div>
9   </a>
10   <a href="structing.html" class="inlinecontent" id="inlinecontent3">
11    <img src="mainforth.png" class="mainfirstpic">
12    <p>あのポケモンたちのキョダイマックのすがたが登場</p>
13    <div class="triangle"></div>
14   </a>
15  </div>

css
1
2.inlinecontainer1 {
3 width: 100vw;
4 height: 45vh;
5}
6
7.inlinecontent {
8 display: inline-block;
9 background-color: white;
10 vertical-align: top;
11 width: 25%;
12 height: 100%;
13 border-radius: 2%;
14 border-bottom: solid 1vh red;
15 padding: 0%;
16 font-size: 1.5rem;
17 margin-left: 1%;
18 position: relative;
19 box-shadow: 0vw 1vh;
20
21}
22
23.inlinecontent:hover {
24 text-decoration: none;
25 color: white;
26}
27
28.inlinecontent:first-child {
29 width: 45%;
30 height: 100%;
31 background-color: darkgray;
32 border: 0vh;
33 margin: 0;
34 position: static;
35}
36
37.mainfirstpic {
38 width: 100%;
39 height: 65%;
40}
41
42#inlinecontent1 .mainfirstpic {
43 height: 75%;
44}
45
46.inlinecontent p {
47 padding: 4% 8%;
48 color: black;
49}
50
51.triangle {
52 position: absolute;
53 bottom: 0;
54 right: 0;
55 border-style: solid;
56 border-width: 0 0 2.5vw 2.5vw;
57 border-color: transparent transparent red transparent;
58}