SCSS 动画复选框：动态宽度

Question

我有一个动画翻转 SCSS 复选框，但有两个问题无法解决：

a) 我希望有一个基于内容而不是静态的动态宽度。问题是我有 2 个内容，一个是“已选中”，一个是“未选中”

b) 我希望同时添加图标（使用 fontawesome 5）和文本，而不是排他的（我的意思是图标 + 文本）。在最坏的情况下，我希望有一种方法可以使用图标或文本

这是我如何定义它：

<input class="btn-toggle btn-toggle-flip" id="cb5" type="checkbox" />
<label class="btn-toggle-label" data-tg-off="UNSAVED" data-tg-on="SAVED" for="cb5"></label>

SCSS太长了，最好看这里的示例：

https://codepen.io/cdemez/pen/QWjXRjw

对于这两个问题，请在 SCSS 中搜索文本“data-tg-off”；-)

你有什么主意吗？

谢谢

Answer 1

为了显示:before和:after内容，您需要设置标签元素的宽度，因为标签内没有内容（逻辑上为空），只有这样您才能看到伪元素，因为伪元素是在元素内容之前和之后呈现在元素内部。此外，为了让 font-awesome 出现，您需要要显示的图标的 unicodes，以便您可以将它们作为 html 属性传递给 css，但您还需要明确设置伪元素的 font-family 这将使你的文字看起来很奇怪。解决您的用例的两个主要方面是：

对于出现在标签内的图标和伪元素的动态宽度：

HTML

<label class="btn-toggle-label" data-tg-off="UNSAVED &#xf004" data-tg-on="SAVED &#xf004 " for="cb5"></label>

CSS

.btn-toggle-flip {
+ .btn-toggle-label {
    &:after,
    &:before {
       width: auto;
       max-width: 100%;
       font-family: "Font Awesome 5 Free";
    }
}
.btn-toggle-label {
    width: 200px;
}

我在这里为您的两个用例尝试了这种解决方法，请查看这支笔：

https://codepen.io/mudassirzr/pen/XWmvrWp