时间戳

首页 > 解决方案 > 如果内容为空字符串，则样式组件不显示 ::after 伪类

reactjs - 如果内容为空字符串，则样式组件不显示 ::after 伪类

问题描述

我遇到问题找到解决方案。在样式化的组件中，我使用 after 伪元素。只要我将内容值设置为某些东西，它就可以工作，否则它不会出现。我需要它是空的（就像在纯 CSS 中一样）。这样做的方法是什么？

 export default css`
  display: flex;
  height: 100%;
  width: 100%;
  &::after {
    bottom: 0;
    content: "";
    position: absolute;
    width: calc(100% - 11px);
    box-shadow: 0 8px 6px 0px rgba(var(--rgb-black),0.16);
  }´

标签： reactjsstyled-components

解决方案

:after我也遇到了这个问题，如果不使用非空内容字符串，我无法让 styled-components 呈现伪元素。但是让文本不可见对我来说是一个可以接受的解决方法：

&::after { 
  content: "a"; //use non-empty string
  color: rgba(0,0,0,0); //make it invisible
  display: inline-block; //so width & height can be set
}

这是 CodePen 的完整示例：https ://codepen.io/remyho427/pen/VwMNeaG

推荐阅读