Question

我正在尝试在页面上定位元素的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的人可以提供帮助，那就太棒了！

Answer 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
    }
}

Answer 2

似乎也是添加此内容的好地方...

如果您想在"上添加一个符号（如content:），那么这对我来说是成功的秘诀：

// symbol
const $quoteSym = '"';

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

看起来有些古怪，但是关于使用哪种类型的报价，封装方法/顺序似乎有所不同。

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

2 个答案: