CSS中的before和:after伪元素使用详解

2019-09-07 郑州网站建设  

Nicolas Gallagher使用伪元素用静态的HTML标签创建84个GUI图标。

为了补充说明上述内容(和利用当前发展的趋势),我收集一些完全在伪元素下运行的东西。本文主要针对这一类人群,即已经看到了用伪元素做出了很酷的东西,但想知道所有有关before在css技术里的运用。

尽管css 规范中包含其他的伪元素,我们焦点是 :before 和 :after。因此,为了简便起见,我所说的“伪元素”泛指这两个非常的伪元素。
伪元素能做什么呢?

“伪元素”,顾名思义。它创建了一个虚假的元素,并插入到目标元素内容之前或之后。

单词“pseudo”是希腊语的英译,它的基本意思是“说谎的,不诚实的,错误的。”因此叫伪元素是适合的。因为在文档中它不实际改变什么。相反的,它们是像幽灵一般的元素插入在css中,他们对用户是可见的,可以通过css控制。
基本语法

:before 和 :after 伪元素编码特别简单(和大多数的css属性一样不需要一大堆的前缀)。这里是一个简单的例子。
 

CSS Code复制内容到剪贴板

#example:before {   

  content"#";   

}   

    

#example:after {   

  content".";   

}  

这个例子中提到了两件事情,第一,我们用#example:before和#example:after来目标锁定相同的元素.严格的说,在代码中他们是伪元素。

第二,在内容模块中提到,伪元素如果没有设置“content”属性,伪元素是无用的。

在这个例子中,拥有属性id的元素将有一个哈希符号放置内容之前,和一个句号在内容之后。
语法笔记

你可以设置content属性值为空,并且仅仅把他当做一个内容很少的盒子。像这样:
 

CSS Code复制内容到剪贴板

#example:before {   

  content"";   

  displayblock;   

  width100px;   

  height100px;   

}  

然而,你不可以完全的移除content属性,如果你移除了,伪元素将不会起作用。至少,content属性需要空引用作为它的值(即:content:“”)。

你也许注意到,你也可以用两个冒号(::before 和 ::after) 写伪元素,这个我以前讨论过的。简短的解释是,对于这两种语法没有什么不同,仅仅一点的不同是,伪元素(双冒号),css3中的伪类是(单冒号)

最后就语法而言。从技术上讲,你可以普遍的应用伪元素,不是放在特殊的元素上,像这样:
 

CSS Code复制内容到剪贴板

:before {   

  content"#";   

}  

虽然上面是有效的,但是它十分的没用。代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了<body>标签和它的所有内容,你仍会在页面上看见两个散列符号:一个在<html>里,另一个在<body>标签里,浏览器会自动创建哪一个。
插入内容的特点

正如前面提及的,插入的内容在页面的模板里是不可见的。只能在css里可见

同时,插入的元素在默认情况下是内联元素(或者,在html5中,在文本语义的类别里)。因此,为了给插入的元素赋予高度,填充,边距等等,你通常必须显式地定义它是一个块级元素。

这会是对怎么设计伪元素的一个简要的说明,看我下面文本编辑器的这幅图

2015527152044668.jpg (500×324)

在这个例子中,我高亮的样式将被应用到元素里插入到目标元素内容的前面和后面。

还要注意的是典型的CSS继承规则适用于插入的元素。例如,你有字体系列黑体,宋体,无衬线字体应用到body元素里,然后伪元素会像其他元素一样继承这些字体系列。

同样的,伪元素不会继承没有自然继承自父元素(如 padding and margins)的样式。
之前或之后是什么?

你的直觉是:before和:after伪元素可能是 插入的内容会被注入到目标元素的前或后注入。但是,正如上面提到的,不是这样的。

注入的内容将是有关联的目标元素的子元素,但它会被置于这个元素的任何内容的“前”或“后”。

为了证明这一点,看看下面的代码。首先,在HTML:
 

XML/HTML Code复制内容到剪贴板


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1123.html转载请标明出处,谢谢合作!
标签:

  • е
  • css
  • G
  • before:after
  • α
  • Nicolas