踩坑 ::after ::before CSS伪元素不起作用解决办法
# 省流版## 问题
这段CSS不起作用是为什么？
```css
div::after {
margin-top: .5rem;
margin-bottom: .25rem;
border-color: #eee;
border-top: 1px solid #dee2e6;
}
```
## GPT4回答
CSS中的伪元素 ::after 用于在元素的内容之后插入一些内容。然而，在你的代码中，伪元素 ::after 没有设置 content 属性，这是必需的。如果没有 content 属性，伪元素实际上是不会显示的。
要让你的CSS起作用，你需要添加 content 属性，即使是一个空字符串。
```css
div::after {
content: "";/* 这是必需的 */
margin-top: .5rem;
margin-bottom: .25rem;
border-color: #eee;
border-top: 1px solid #dee2e6;
}
```
# MDN翻译之坑
中文版MDN（https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after）
对于::after伪元素仅提到**通常**会配合`content`属性
```
CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。**通常**会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
```
而英文版MDN （https://developer.mozilla.org/en-US/docs/Web/CSS/::after）
对于::after伪元素虽然也提到**often** with `content` property
```
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
```
#### 但在下方还提到::after伪元素如果没有`content` property 实际上会和`display: none`表现相同
```
If the content property is not specified, has an invalid value, or has normal or none as a value, then the ::after pseudo-element is not rendered. It behaves as if display: none is set.
```
***
真是踩了巨坑，为了省力对着中文版MDN查了半天，还以为::after伪元素有什么特殊规则，会忽略某些CSS，结果查了半天也没查出个所以然。
然后一开始去问了GPT3.5，GPT3.5也乱答一通说什么有可能是CSS被覆盖了、选择器样式没写对之类的
【实际上没写content属性，DOM中根本不出现::after伪元素】。
感觉GPT3.5明显在乱说，于是再去问GPT4，便得到了开头省流版的回答。
尝试一番，果真如此（GPT4 NB）
然后再回看中文MDN，再次仔细阅读还是没发现必须使用content属性。再次查阅英文版发现提了一句不用content就相当于display:none……
真是卧了个大槽。
（不知是翻译的锅，还是一开始英文版也没提，勘误后没来得及翻译从而造成中英文差异）
# 结语
GPT4 NB，大大提升debug效率、学习效率，要是放在以前遇到这种问题真的不敢想象不知要多久才能得到准确答案……
（写代码真不建议用GPT3.5，纯粹浪费时间）
有条件还是查阅英文文档吧，毕竟英文是原生语言【 yiba有英文文档还是看英文文档好一点，我也踩过很多这坑，一般看完中文要再看下英文，简单的就直接看英文
中文的文档，好多项目都是老的 王一之 发表于 2023-11-11 10:14
yiba有英文文档还是看英文文档好一点，我也踩过很多这坑，一般看完中文要再看下英文，简单的就直接看英文
...
话说哥哥 这md排版样式是不是越改越丑了…… steven026 发表于 2023-11-11 12:11
话说哥哥 这md排版样式是不是越改越丑了……
啊？怎么说，没改过啊
页:
[1]