我希望元素的大小根据其旁边的元素在屏幕上占据多少空间而减小

Question

So I want the divider line on the picture to decrease or increase in size based on the All publications link. Currently I have done it like this, but I'm wondering if there's a better solution for this?

@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

You could use a :before element:

 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>