学习before和after伪元素

时间 2019-11-26

标签学习元素繁體版

原文原文链接

参考：http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.htmlcss

伪元素在文档中不实际改变什么，可是能插入css中，对用户可见，可经过除css控制。　　html

基本语法：css3

#example:before{
content:"#";
}

#example:after{
content:"*";
}

在内容模块中，伪元素若是没有设置content属性，伪元素是无效的；浏览器

单冒号跟双冒号区别：伪元素（双冒号），css3中伪类（单冒号）；函数

能够设置content内容为空，当作一个无内容的盒子：spa

#example{
content:"";
display:block;
width:100px;
height:100px;
}

就语法而言，能够广泛应用伪元素，不用放在特殊元素上：示例代码：code

:before{
content:"#";
}

虽然有效，可是没用，代码会在DOM每一个元素内容前插入符号，即便删除了body标签和他全部的内容，仍会在页面上显示：一个在<html>里，另外一个在<body>标签里。浏览器会自动建立；htm

插入的元素在默认状况下是内联元素，为了给它赋予高度，填充，边距，经常显示的定义它是一个块级元素；blog

可插入非文本内容:element

a:after{
content:attr(href);
}

这会致使页面上的每个<a>元素的href值当即被放置在每一个各自的<a>元素的后面。在文档被打印时，它能够用做一个包含全部URl的打印样式表。

也能够用这个函数去获取元素的title属性，或者甚至是microdata的值。固然，并非全部的例子都符合本身的实际，但根据不一样的状况，一个特定的属性值做为一个伪元素能够是实际的；然而，获取title或者图像的alt的值并做为实际的伪元素显示在页面上是不可能的。

记住伪元素必须是被应用元素的子元素。图像，这是void(或者是空元素)，没有子元素，因此它在这个列子中不可用，一样也适用于其余空元素，例如：<input>。

伪元素不会出如今DOM中，这些元素不是真正的元素，所以他们不可用，不要用伪元素生成内容，是网页可用性和可访问性的关键。

注入的元素是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的前或后，因此不是插入到此元素内部，而是被置于它的前或后。