如何使用styled-components编写带条件判断的CSS伪元素？

你的语法逻辑本身没问题，但伪元素::before无法显示的核心原因是缺少content属性，并且没有设置合适的定位来让它成为外围的边框。

CSS伪元素（::before/::after）默认是inline元素，且必须指定content（哪怕是空字符串）才会被浏览器渲染；同时需要通过定位和尺寸设置，让它包裹住原div，形成外层边框的效果。

修正后的代码 #

import styled, { css } from 'styled-components';

const CardContainer = styled.div((props) => css`
    align-self: center;
    margin: auto;
    width: 80%;
    height: 100%;
    background: rgb(222, 222, 222);
    border-style: solid;
    border-width: 0.1rem;
    box-shadow: 4px 4px 8px rgba(183, 183, 183, 0.25);
    /* 给容器设置相对定位，让伪元素基于它定位 */
    position: relative;

    ${props.isSelected && css`
        &::before {
            /* 必须设置content，空字符串即可触发伪元素渲染 */
            content: '';
            border-color: red;
            border-style: solid;
            border-width: 0.1rem;
            /* 绝对定位，让伪元素刚好包裹住容器 */
            position: absolute;
            top: -0.1rem;
            left: -0.1rem;
            right: -0.1rem;
            bottom: -0.1rem;
            /* 把伪元素放在原边框下方，避免遮挡容器内容 */
            z-index: -1;
        }
    `}
`);

关键修改说明 #

1. 给容器添加position: relative，让伪元素的绝对定位基于容器计算坐标
2. 伪元素必须添加content: ''，这是伪元素被渲染的必要条件
3. 通过top/left/right/bottom设置为负的边框宽度，让伪元素刚好包裹原容器，形成外层边框的视觉效果
4. 可选添加z-index: -1，避免伪元素遮挡容器内的内容

更简洁的替代方案 #

如果不需要伪元素的复杂场景，直接用outline属性实现外层边框会更简单：

${props.isSelected && css`
    outline: 0.1rem solid red;
    outline-offset: 0; /* 可调整该值控制红色边框与原黑色边框的间距 */
`}

内容的提问来源于stack exchange，提问作者yao