如何在元素::before中添加圆点（• &#8226）？样式不显示如何解决？

嘿，我太懂这种明明按规则写了却看不到效果的抓狂了！踩过类似的坑，给你梳理几个最可能的原因和解决办法：

1. 先把content属性用对——HTML实体在CSS里不生效！ #

你提到想用•（HTML实体&#8226），但CSS的content属性不支持直接写HTML实体，得换成对应的Unicode转义字符。正确的写法是：

你的选择器::before {
  content: "\2022"; /* \2022就是圆点•的Unicode编码 */
  /* 再加个间距和颜色，让圆点更明显 */
  margin-right: 0.5em;
  color: #555;
}

别直接写content: "&#8226";，浏览器会把它当成普通文本显示，而不是解析成圆点。

2. 确认你的选择器真的命中了目标元素 #

有时候看起来选择器没问题，实际可能写错了（比如把.class写成了#class，或者元素标签名写错）。建议打开浏览器开发者工具（按F12），找到目标元素，切换到「伪元素」面板（Chrome在Elements面板底部），看看你的::before样式有没有被应用——如果样式被划掉，说明被更高优先级的规则覆盖了，得提升选择器优先级（比如加父元素选择器，或者用!important临时测试）。

3. 目标元素是不是「替换元素」？ #

像<img>、<input>、<iframe>这类替换元素，浏览器不会为它们生成::before/::after伪元素，因为它们的内容由外部资源（图片、输入框控件）决定。如果你的目标元素是这类，得给它套一个容器（比如<div>或<span>），然后给容器加::before。

4. 排查有没有被隐藏或遮挡 #

• 检查父元素或伪元素有没有设置display: none、visibility: hidden，或者opacity: 0；
• 如果伪元素用了定位（比如position: absolute），看看是不是父元素设置了overflow: hidden把它裁掉了，或者z-index太低被其他元素挡住了；
• 伪元素默认是inline元素，如果需要调整大小或位置，可以设置display: inline-block或者block。

示例代码（直接能用的版本） #

/* 给所有带.target类的元素加圆点前缀 */
.target::before {
  content: "\2022";
  margin-right: 8px;
  font-size: 1.2em;
  color: #2c3e50;
}

按照上面的步骤排查，基本上就能解决问题啦！

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