伪类和伪元素 | 您所在的位置:网站首页 › js怎么操作伪元素 › 伪类和伪元素 |
有一组特别的伪元素,它们和content属性一同使用,使用 CSS 将内容插入到你的文档中中。 你能用这些插入一个文本字符串,和在下面的实时示例里那样。试着改变content属性的文本值,看看输出是怎么改变的。你也能改变::before伪元素为::after,看到这段文本插入到了元素的末尾而不是开头。 从 CSS 插入文本字符串,我们并不会在 Web 浏览器上经常这么做,因为对于一些屏幕阅读器来说,文本是不可见的,而且对于未来别人的查找和编辑也不是很方便。 这些伪元素的更推荐的用法是插入一个图标,例如下面的示例加入的一个小箭头,作为一个视觉性的提示,而且我们并不希望屏幕阅读器读出它。 这些伪元素经常用于插入空字符串,其后可以像页面上的其他元素被样式化。 下个示例,我们已经用 ::before伪元素加入了个空字符串。我们把它设为了display: block,以让它可以用 width 和 height 进行样式化。然后我们可以用 CSS 像任何元素那样样式化。你可以摆弄 CSS,改变它的外观和行为。 ::before和::after伪元素与content属性的共同使用,在 CSS 中被叫做“生成内容”,而且你会见到这种技术被用于完成各种任务。CSS Arrow Please网站就是一个著名的示例,它帮你用 CSS 生成一个箭头。在你创建你的箭头的时候看下 CSS,你将会看到实际使用的::before和::after伪元素。无论什么时候你看到了这些选择器,都要看下content属性,以了解文档中添加了什么。 |
CopyRight 2018-2019 实验室设备网 版权所有 |