无法定位：在 JSS 中的伪选择器之前答案

【问题标题】：Can't target :before Pseudo selector in JSS无法定位：在 JSS 中的伪选择器之前
【发布时间】：2016-12-05 01:49:57
【问题描述】：

我正在尝试定位页面上元素的 after 伪选择器。我正在为这个项目尝试 JSS，到目前为止我是一个超级粉丝，但对它还是很陌生。我在选择：使用 JSS 选择之后遇到问题。这可能吗，因为我认为是在阅读文档时。

这是我的标记：

<Link to="about" className={classes.link}>About</Link>

我的 JSS 看起来像这样：

link: {
    position: 'relative',
    fontFamily: fonts.family.primary
    '&:before': {
        content: ' ',
        position: 'absolute',
        bottom: 0,
        left: 50,
        width: '100%',
        height: '1rem',
        display: 'block',
        background:styles.colors.white
    }
}

如果有熟悉 JSS 的人可以提供帮助，那就太好了！

【问题讨论】：

你的意思是css:before伪元素吗？
是的，我有 @guest271314，但我是用 JSS 写的
你想达到什么目的？
我想实现一个悬停效果，它基本上是从左到右为链接底部的一条线设置动画。如果我可以使用 :before @guest271314，这非常容易
您可以使用css :hover 和animation 在元素悬停时创建效果。没试过jss或react，虽然可以使用javascript获取和设置css:before或:after伪元素。

标签： javascript reactjs styling

【解决方案1】：

你做的是对的。除了两件事：

1) 语法错误：fontFamily: fonts.family.primary 后面缺少逗号

2) 内容应该是用双引号括起来的字符串，而双引号又应该用单引号括起来。所以，一个空的内容就是content: '""',

所以只需尝试以下方法：

link: {
    position: 'relative',
    fontFamily: fonts.family.primary,
    '&:before': {
        content: '""',
        position: 'absolute',
        bottom: 0,
        left: 50,
        width: '100%',
        height: '1rem',
        display: 'block',
        background:styles.colors.white
    }
}

【讨论】：

我正要安装一个嵌套的 JSS 包，但很头疼，感谢这个很棒的建议！
因为我多次尝试调试时偶然发现了这个问题，所以我想在这里补充一下，如果您的内容包含转义字符，则需要双重转义。例如：content: '"\\A"'

【解决方案2】：

似乎也是一个添加这个的好地方......

如果你想在content: 中添加一个符号（比如"），那么这对我来说就成功了：

// symbol
const $quoteSym = '"';

// jss class
quote: {
   color: 'white',
   position: 'relative',
   padding: '2rem',
   '&:before': {
      display: 'inline-block',
      content: `'${$quoteSym}'`,
   },
},

看起来有点老套，但封装方法/顺序，关于你使用什么类型的引号，似乎有所不同。

【讨论】：