标签：伪元素 html meta ati after head hover content border
1、"first-line" 伪元素用于向文本的首行设置特殊样式。只能用于块级元素
1、"first-letter" 伪元素用于向文本的首字母设置特殊样式。只能用于块级元素
3、":before" 伪元素可以在元素的内容前面插入新内容。
4、":after" 伪元素可以在元素的内容之后插入新内容。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1{ width:100px; height: 30px; border: 1px solid black; left: 10px; position: relative; text-align: center; } .div2{ width:200px; height: 200px; border: 1px solid black; top: 30px; left: -1px; position: absolute; text-align: center; display: none; } .div2:after{ content: ‘‘;/*没具体内容（如图片）时，也必须要写此句*/ width: 100px; height: 1px; background-color: white; position: absolute; top: -1px; display: none; } .div1:hover .div2:after{ display: block; } .div1:hover .div2{ display: block; } </style> </head> <body> <div class="div1"> div1 <div class="div2"> div2 </div> </div> </body> </html>
效果
标签：伪元素 html meta ati after head hover content border
原文地址：http://www.cnblogs.com/xmlys/p/7597521.html
