如何用CSS添加头部文本？伪元素content设置无效问题求解

问题原因 #

你的代码存在两处关键错误导致样式未生效：

1. CSS语法错误：content 属性的字符串值未加引号，浏览器会将 MySite 视为无效标识符而非文本内容，直接忽略该规则。
2. HTML语法错误：<div class="headerlogo> 缺少闭合的双引号，会导致DOM解析异常，可能影响后续元素的样式匹配。

修正后的代码 #

修正后的HTML #

<body>
 <div id="headerMain" class="header flex-row start-xs">
   <div class="flex-col-xs-nofill">
     <div class="headerlogo"> 
        <img src="image.svg" >
     </div>
   </div>
   <h1></h1>
 </div>
</body>

修正后的CSS #

#headerMain h1:before {
 content: "MySite";
}

相关知识点 #

• content 属性规则：使用伪元素（:before/:after）时，content 的字符串值必须用单引号或双引号包裹；若无需内容可设为 content: "";，无引号的写法属于语法错误。
• HTML属性规范：所有属性值的引号必须成对出现，缺失闭合引号会破坏DOM结构，导致浏览器无法正确识别元素的类名、ID等属性，进而影响样式选择器的匹配。
• 伪元素显示特性：:before 伪元素默认是行内元素，若需要调整布局（比如块级显示、设置宽高），可以为其添加 display: block; 等样式规则。

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