伪元素之前和窗口之间的空间

Question

我有显示该行底部的元素之前。 是否有可能在此元素之前向其添加边距，以便在每个屏幕尺寸中都将留出一个空间，例如20个像素。

现在，您可以看到我正在使用width属性从右开始添加空间。在这里，该空间没有显示出来。

请帮助。

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">
    <a href="javascript:void(0)">more</a>
</div>

Answer 1

如果您希望右边距为20px，则可以使用right：20px;而不是宽度

.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;
}