按钮上的左边框在CSS中不起作用

Question

I am trying to display a pipe between two buttons using border-left property. Instead of using a separate div .

My HTML is as follows:

<transition name="fade">
    <button class="search-field__submit-button" type="submit">
        <img src="search.svg">
    </button>
</transition>

<div v-show="searchInput" class="search-field__wrapper">
    <button class="search-field__reset-button" type="reset" @click="reset">
        <img src="close.svg">
    </button>
</div>

My CSS is as follows:

.search-field__submit-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
}

.search-field__submit-button:focus {
    outline: 1px solid var(--color-blue-active);
}

.search-field__submit-button img {
    width: 1.5rem;
    height: 1.5rem;
}

.search-field__wrapper {
    position: absolute;
    top: 0;
    right: 4rem;
    bottom: 0;
    display: flex;
    justify-content: center;
}

.search-field__spinner,
.search-field__reset-button {
    display: flex;
    align-items: center;
}

.search-field__reset-button:focus {
    outline: 1px solid var(--color-blue-active);
}

.search-field__reset-button img {
    width: 1.5rem;
    height: 1.5rem;
}

.search-field__reset-button::after {
    border-right: 2rem solid red;
}                                        //this is what I am trying

Tried: Using border-left for submit_button and also border-right for the reset_button. But none of them has worked. I used ::before pesudo element.

Problem: The right border on the reset_button is not visible at all. Where are things wrong?

Answer 1

::after pseudoelement should have content property to be shown. If you have no need in content, just set it to empty value like that:

.search-field__reset-button::after {
    content: '';
    border-right: 2rem solid red;
}