SCSS 动画复选框：动态宽度答案

【问题标题】：SCSS Animated checkbox : dynamic widthSCSS 动画复选框：动态宽度
【发布时间】：2020-05-29 13:08:00
【问题描述】：

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

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”；-)

你有什么想法吗？

谢谢

【问题讨论】：

在您的实际标记中，您的标签不会包含任何文本，这是您想要的吗？因为在可访问性方面听起来是错误的。
@AmauryHanser 是的，因为我需要 2 个文本，一个用于检查状态，一个用于未检查状态。这就是我使用 SCSS-'content' 的原因。问题是内容是动态的，基于我输入的文本。另一个问题是 SCSS-'content' 不能包含 HTML :-(

标签： html css sass font-awesome-5

【解决方案1】：

为了显示 :before 和 :after 内容，您需要设置标签元素的宽度，因为标签内没有内容（逻辑上为空），只有这样你才能看到伪元素，因为伪元素在元素内容之前和之后呈现在元素内部。此外，为了让 font-awesome 出现，您需要您想要显示的图标的 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

【讨论】：