Html 设置按钮：在css中设置按钮的尺寸之前

我第一次把CSS动画和伪元素混为一谈

我有一个按钮，我想在点击时产生连锁反应，没有javascript。我就快到了，但是我的按钮的“：before”元素一直将自己设置为容器的宽度，而不是按钮的宽度

是否有任何方法可以在不使用JavaScript的情况下将按钮的尺寸“：before”设置为按钮的尺寸？另外，我在实际定位：before元素时遇到了问题，理想情况下，我希望它与按钮的边框完全重叠。因此，任何与此相关的建议都会大有帮助

以下是代码笔（使用sass）：

• 效果是按照我希望的方式工作，只是：before元素的对齐和大小，我需要帮助

以下是css：

.custom-btn-primary {
    display: block;
    background: rgba(0, 0, 0, 0);
    color: #d98324;
    border: 2px solid #d98324;
    padding: 0.5rem 1.5rem;
    text-transform: uppercase;
    transition: all 0.5s ease-in-out;
}
.custom-btn-primary:hover {
    color: #e5a864;
    border: 2px solid #e5a864;
    transition: all 0.5s ease-in-out;
}
.custom-btn-primary:before {
    content: "";
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid #d98324;
    position: absolute;
    top: 0; 
    left: 0; 
    height: 100%;
    width: 100%;
}
.custom-btn-primary:focus {
    outline: 0;
    background-color: #d98324;
    color: #230007;
    font-size: calc(1em + 2px);
    border: 0;
}
.custom-btn-primary:focus:before {
    animation: ripple-out 0.5s ease-out;
}

以下是html：

<div class="row">
    <div class="col-12 col-md-4">
        <button class="custom-btn-primary">primary</button>
    </div>
    <div class="col-12 col-md-4">
        <button class="custom-btn-secondary">secondary</button>
    </div>
    <div class="col-12 col-md-4">
        <button class="custom-btn-light">light</button>
    </div>
</div>

主要的，重要的
次要的
光

我使用了你的代码笔，发现你只需要添加

位置：相对

到您的

自定义btn-#{$color}

类

---

您的

：before

伪元素已经是

位置：绝对

，但它当前将自身定位到列中，而不是按钮本身

我使用了你的代码笔，发现你只需要添加

位置：relative

到您的

自定义btn-#{$color}

类

---

您的

：before

伪元素已经是

位置：绝对

，但它当前将自身定位到列中，而不是按钮本身

哦，天哪，我没想到一句话就能搞定它！谢谢你的快速反应哦，我没想到一句话就能解决它！谢谢你的快速回复