Space between before pseudoelement and window - css

Question

I have before element which show's line bottom.
Is this possible to add margin right to this before element that it will one space for example 20 pixels in every screen sizes.
Right now as you can see I'm adding space from right with manipulating width property .In here this space didn't show'n.
Please help.
body {
overflow-x:hidden;
}
.link_more {
margin-left: auto;
text-align: right;
position: relative;
z-index: -1
}
.link_more a {
text-decoration: none;
font-size: 18px;
font-weight: 700;
color: #000;
}
#media only screen and (max-width: 768px) {
.link_more a {
margin-right:0
}
}
.link_more a:before {
content: "";
position: absolute;
border-bottom: 1px solid #000;
width: 9.6%;
top: 25px
}
#media only screen and (max-width: 768px) {
.link_more a:before {
width:16%;
}
}
#media only screen and (max-width: 1200px) {
.link_more a:before {
width:10%
}
}
#media only screen and (max-width: 992px) {
.link_more a:before {
width:9.6%
}
}
#media only screen and (max-width: 568px) {
.link_more a:before {
width:calc(100% - 73.7vw)
}
}
#media only screen and (min-width: 1200px) {
.main_wallpaper .main_content .link_more a:before {
content:"";
position: absolute;
border-bottom: 1px solid #000;
width: 8.6%;
top: 25px
}
}
<div class="link_more">
more
</div>

Answer 1

If you want right margin of 20px, You can use right:20px; instead of width
.link_more a {
text-decoration: none;
font-size: 18px;
font-weight: 700;
color: #000;
right:20px;
position:relative;
}
.link_more a:before {
content: "";
position: absolute;
border-bottom: 1px solid #000;
width: 100%;
top: 25px
right:20px;
}