另一个样式块中的 CSS 伪元素答案

【问题标题】：CSS Pseudo Element inside another style block另一个样式块中的 CSS 伪元素
【发布时间】：2015-05-09 23:48:03
【问题描述】：

结构问题。

我试图将伪元素放在 a 标签 css 括号内。目前它看起来像这样：

    a {
        background-color: grey;
        padding: 50px 100px 50px 100px;
        text-decoration: none;
        display: inline-block;
        font-size: 50px;
        border: 3px solid grey;
        border-radius: 25px;
        box-shadow: 0px 0px 30px 10px #080808, 0px 0px 25px 30px #2f4f4finset;
        text-shadow: 3px 3px #999999;
        margin-left: 10%;
        margin-top: 20%;
    }

    a:before {
    content: "* ";
}

    a:after {
   content: " *";
}

我希望它像这样工作：

    a {
        background-color: grey;
        padding: 50px 100px 50px 100px;
        text-decoration: none;
        display: inline-block;
        font-size: 50px;
        border: 3px solid grey;
        border-radius: 25px;
        box-shadow: 0px 0px 30px 10px #080808, 0px 0px 25px 30px #2f4f4finset;
        text-shadow: 3px 3px #999999;
        margin-left: 10%;
        margin-top: 20%;

    a:before {
    content: "* ";
}

    a:after {
   content: " *";
}
    }

关于如何正确“调用”伪元素而不破坏原始 a 标签样式的任何提示？

【问题讨论】：

CSS 中没有嵌套。正如您所问的那样，“正确”的方法就是您在第一个代码示例中显示的那样。

标签： css pseudo-element

【解决方案1】：

可以使用SASS或LESS等预处理器来实现。

a {
    // styles here
    &:before {
        // styles for :before
    }
}

【讨论】：

【解决方案2】：

在纯 CSS 中无法做到这一点，因为纯 CSS 不允许嵌套样式块。你需要像SASS 或LESS 这样的预处理器。

【讨论】：