我希望元素的大小减少，因为它旁边的元素占用了多少空间占用屏幕空间

Question

所以我希望图片上的分隔线根据所有出版物链接减少或增加。目前我这样做了，但我想知道是否有更好的解决方案呢？

@media (max-width: 767px) {

    .dividing .col-xs-6 {
        width:75%;
    }
}
@media (max-width: 600px) {

    .dividing .col-xs-6 {
        width:65%;
    }
}

@media (max-width: 423px) {

    .dividing .col-xs-6 {
        width:55%;
    }
}

Answer 1

你可以使用：before元素：

h2{
    margin: auto;
    margin-top: 2em;
    text-align: right;
    display: flex;
    align-items: center;
    color: #34495e;
    padding-bottom: 1em;
}
h2:before{
    content: '';
    flex: 1 0 0;
    margin-right: 0.25em;
    height: 2px;
    background: #34495e;
}

<h2><a href="http://stackoverflow.com">Test</a></h2>