时间戳

首页 > 解决方案 > 第一个伪类在样式组件中不起作用

styled-components - 第一个伪类在样式组件中不起作用

问题描述

styled.q 中的第一个伪类不起作用。它不会出现在屏幕上。如果我复制并粘贴它以便首先列出 ::before 它不起作用。如果我第二次列出第一个伪类，它会起作用。

const ResearchingRyan = styled.div`
  height: 100vw;
  width: 100vw;
  background-image:url(${phonePic});
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  display:flex;
  flex-direction:column;
  justify-content: flex-end;
  align-items: center;
  @media screen and (min-width: 525px) {
    background-image:url(${tabletPic});
    height: 500px;
    width: 500px;
  }
  @media screen and (min-width: 1100px) {
    background-image:url(${desktopPic});
    height: 500px;
    width: 500px;
  }
  `
  const QuoteP = styled.p `
    background-color:${dark};
    color:${bgAlt};
    padding:1rem
  `
  const QuoteQ=styled.q`
    quotes: "\201C", "\201D";
    &::after {
      content: close-quote;
      font-weight: bold;
      font-size: 36px;
      color:${bgAlt};
    }
    &::before {
      content: open-quote;
      font-weight: bold;
      font-size: 36px;
      color:${bgAlt};
    }
   `;

标签： styled-componentspseudo-element

解决方案

推荐阅读