如何让CSS伪元素:before在DOM中正常渲染？

核心原因：HTML元素的style属性不支持CSS伪元素（如::before/::after）。伪元素是浏览器基于CSS规则生成的虚拟元素，不属于DOM元素的直接样式范畴，只能通过样式表（外部CSS、组件内<style>标签、CSS-in-JS方案）定义，无法通过内联style属性设置。

你的代码中，<i>元素的基础样式能生效是因为这些是元素的直接样式，但&::before部分会被浏览器忽略，因为内联style不识别伪元素语法。

解决方法1：使用组件内<style>标签定义类样式 #

直接在组件中嵌入<style>标签，定义包含伪元素的类，再通过className绑定到<i>元素：

return (
  <>
    <style>
      {`
        .inline-block-item {
          background-color: yellow;
          width: 100px;
          height: 30px;
          display: inline-block;
          position: relative;
        }
        .inline-block-item::before {
          content: "Good Day";
          position: absolute;
          left: -50px;
          top: 50px;
        }
      `}
    </style>
    <p style={style}>
        Lorem ipsum dolor sit amet, <i className="inline-block-item"></i>consectetur
        adipiscing elit, sed do<i className="inline-block-item"></i> eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
        <i className="inline-block-item"></i>
    </p>
  </>
)

解决方法2：使用CSS-in-JS库（如styled-components） #

如果项目中使用CSS-in-JS方案，可以直接创建带伪元素的样式组件：

import styled from 'styled-components';

const InlineBlockItem = styled.i`
  background-color: yellow;
  width: 100px;
  height: 30px;
  display: inline-block;
  position: relative;

  &::before {
    content: "Good Day";
    position: absolute;
    left: -50px;
    top: 50px;
  }
`;

// 组件中使用
return (
    <p style={style}>
        Lorem ipsum dolor sit amet, <InlineBlockItem></InlineBlockItem>consectetur
        adipiscing elit, sed do<InlineBlockItem></InlineBlockItem> eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
        <InlineBlockItem></InlineBlockItem>
    </p>
)

注意事项 #

• 伪元素的content属性必须设置（即使是空字符串""），否则伪元素不会被渲染。
• 如果使用CSS预处理器（如Sass），&::before的语法是有效的，但同样不能写在内联style中，必须放在预处理器处理的样式文件或标签里。

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