×のボタンの下に線ができてしまいます

テキストボックスの中に文字を入れると×のボタンで
文字が消えるようにしたいですが、消すと×のボタンの下に線ができてしまいます。
CSSに以下のコードを入れると消えると思ったのですが…うまくいきません。
.clearButton{
background: background: transparent !important;
}

php
1<div class="searchFrame">
2	<input type="text" class="textbox" name="valueFrom_1000001" id="valueFrom_1000001" autocomplete="on" list="freeword_1000001">
3	<datalist id="freeword_1000001">
4		<option value="その他"></option>
5		<option value="背"></option>
6	</datalist>
7	<button type="button" name="clearButton" class="clearButton icon-clear"></button>
8</div>

css
1.searchFrame{
2	position:relative;
3	width: max-content;
4}
5.searchFrame .clearButton{
6	position:absolute;
7	bottom:10px;
8	right:40px;
9}
10.clearButton{
11    border: none;
12    outline: none;
13    background: transparent;
14}
15.clearButton::before,
16.clearButton::after {
17	width: 50%;
18}
19.icon-clear::before {
20	transform: rotate(45deg);
21}
22.icon-clear::after {
23	transform: rotate(-45deg);
24}
25.icon-clear::before, .icon-clear::after {
26    position: absolute;
27    top: 0;
28    left: 0;
29    right: 0;
30    bottom: 7px;
31    margin: auto;
32    content: '';
33    display: block;
34    height: .3rem;
35    width: 100%;
36    background-color: currentColor;
37    pointer-events: none;
38}