SCSS 动画复选框：动态宽度

Question

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

a) 我希望有一个基于内容而不是静态的动态宽度。问题是我有 2 个内容，一个用于 'checked'，一个用于 'unchecked'

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 内容，您需要在标签元素上设置宽度，因为没有标签内的内容（逻辑上为空），只有这样你才能看到伪元素，因为伪元素在元素内容之前和之后呈现在元素内部。此外，为了使字体很棒，您需要要显示的图标的 unicode，以便您可以将它们作为 html 属性传递给 css，但您还需要明确设置字体-伪元素的族，这将使您的文本看起来很奇怪。解决您的用例的两个主要问题是：

要使图标出现在标签内以及伪元素的动态宽度：

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

SCSS 动画复选框：动态宽度

SCSS Animated checkbox : dynamic width

html

css

sass

font-awesome-5