Set own styles to content in before element - html

Question

I've just created a button. I've found a problem where my content doesn't fit on it's place.
Here is my code:
.btn-red {
display: inline-block;
padding: 13px 20px;
color: #fff;
text-decoration: none;
position: relative;
background: #f42f2c;
font: 10px "Oswald", sans-serif;
letter-spacing: 0.4em;
text-align: center;
text-indent: 2px;
text-transform: uppercase;
transition: color 0.1s linear 0.05s;
border-radius: 0;
border: 1px solid #f42f2c;
}
.btn-red:focus {
box-shadow:none !important;
}
.btn-red::before {
content: "READ MORE";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #f9f9ff;
color:#f42f2c !important;
z-index: 1;
opacity: 0;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn-red::after {
transition: border 0.1s linear 0.05s;
}
.btn-red .btn-red-inner {
position: relative;
z-index: 2;
}
.btn-red:hover {
transition: color 0.1s linear 0s;
text-decoration: none;
color: #f42f2c !important;
}
.btn-red:hover::before {
top: 0;
height: 100%;
opacity: 1;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn-red:hover::after {
transition: border 0.1s linear 0s;
}
<a href="o-nas.php" class="btn-red">
<span class="btn-inner">READ MORE</span>
</a>
I tried to add padding: 13px 20px to .btn-red::before, but it has some bugs and I don't know how to solve this.

Answer 1

I think I achieve the same thing that you wanted without using :before to control the button text. Look below:
.btn-red {
position: relative;
display: inline-flex;
box-sizing: border-box;
padding: 13px 20px;
text-decoration: none;
background-color: #f42f2c;
border: 1px solid #f42f2c;
}
.btn-red:before {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 0;
content: "";
background-color: #fff;
transform: translateY(-50%);
transition: height 0.2s ease-in-out;
}
.btn-red .btn-inner {
font: 10px "Oswald", sans-serif;
color: #fff;
line-height: 1em;
letter-spacing: 0.4em;
text-transform: uppercase;
z-index: 1;
transition: color 0.2s ease-in-out;
}
.btn-red:hover:before {
height: 100%;
}
.btn-red:hover .btn-inner {
color: #f42f2c;
}
<a class="btn-red" href="#" title="Read More">
<span class="btn-inner">Read more</span>
</a>
Hope this can help you anyway. If you have any doubt about the code, please, just let me know :)
Cheers!