css中伪类和伪对象（伪元素）区别是什么

css选择器对伪类::before和::after如何生效

我记得有一次，当我在做网页设计时，我想给一个按钮添加一个快速效果。
当时我正在使用 ::after 伪元素并思考如何让它显示一段文本。
我尝试编写一个简单的CSS代码：
css .btn::之后{ 内容：“点我”； 位置：绝对； 顶部：1 00%； 左：5 0%； 变换：translateX(-5 0%)； 背景：rgba(0,0,0,0.5 ); 颜色: 白色; 内边距：5 px； 边框半径：3 px； 显示：无；
接下来，我在 JavaScript 中向按钮附加了一个事件，以便在鼠标悬停时显示此提示：
javascript document.querySelector('.btn').addEventListener('mouseover', function() { this.querySelector('::after').style.display = 'block'; });
document.querySelector('.btn').addEventListener('mouseout', function() { this.querySelector('::after').style.display = 'none'; });
结果当我把代码放到网站上测试的时候，发现并没有显示这个提示。
我检查了代码，发现我没有声明content属性，所以伪元素没有渲染出来。
后来我添加了内容：“点我”；，提示就正常显示了。

等一下，我突然想，如果这个提示很重要，我们不应该考虑屏幕阅读器兼容性吗？