Question

我正在尝试使用border-left属性在两个按钮之间显示管道。而不是使用单独的div。

我的HTML如下：

<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>

我的CSS如下：

.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

尝试：对提交按钮使用border-left，对reset_button使用border-right。但是它们都没有起作用。我使用了::before伪元素。

问题：reset_button的右边框根本不可见。哪里错了？

Answer 1

::after伪元素应具有content属性才能显示。如果您不需要内容，只需将其设置为空值即可：

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

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

1 个答案: