CSS中伪元素after的作用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS中伪元素after的作用相关的知识,希望对你有一定的参考价值。

为什么border-left-color:red没有起到效果??

代码是:
<html>
<head>
<style type="text/css">
#miborder:solid 5px
#mi p::after
border-left-color:red;

</style>
</head>

<body>
<p id="mi" >外的</p>

</body>
</html>

CSS 伪元素用于向某些选择器设置特殊效果。

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片:

h1:after
  content:url(logo.gif);
参考技术A ":after" 伪元素可以在元素的内容之后插入新内容。所以你这么写不行,将 p::after去掉,你要的效果就出来了追问

那这里不用after,after究竟有什么意义嘛,在元素的内容之后插入新内容?这个自已在body里面先插入就好了,为什么要到css来

追答



h1:after content:url(/i/w3school_logo_white.gif)

This is a heading
The :before pseudo-element inserts content before an element.

This is a heading

W3C上的一个例子。

本回答被提问者采纳
参考技术B ::after -- CSS ::after 伪元素,定义在一个元素的内容之后插入content属性定义的内容与样式
语法: E::after
CSS版本:CSS2
引用网址:http://www.dreamdu.com/css/pseudo-element_after/
说明:
定义在一个元素的内容之后插入content属性定义的内容与样式
E::after

示例
div::after

background: lightgreen;
content: "梦之都";

浏览器对after伪元素的兼容性
IE6、IE7与IE8(怪异模式Quirks mode)不支持此伪元素。
参考技术C P mi:after
border-left-color:red;
追问

把我的那句改成你写的这句?同样没作用,再说id前需要加#,你这句本来就非法了。

追答

哦,谢谢,受教了

参考技术D 作用主要是利用伪元素装饰内容 (无论是装饰图片还是音效) 而不需要更改 HTML 的内容,从而帮助内容与样式更好地分离。因为如果仅仅为了画一个装饰用的三角就在 HTML 里多加一个元素,这上对于实际内容来说其实是多余的,对自动分析网页的语义也可能会产生不好的影响 (这取决于分析程序的具体实现)。
应该说,::before 和 ::after 伪元素的初衷还是用于插入内容——不受文档约束,也不影响文档本身(比如,不影响 DOM),只影响最终的样式。
CSS 规范中给的例子很典型:p.note:before content: "Note: " ——这种插入的内容本身其实不是真正的内容,其实是身为文本的样式,所以没必要在 HTML 中重复出现,交给 CSS 来生成会很不错。

不过目前最多见的应用情形的确是把它们用成 content: "" 这样的空元素,然后给这个空元素加上各种样式。这样来说利用的就只是它这个元素的「存在」了(而非元素的内容),已经是讨巧的 hacking 了。

css中伪类/伪元素详解

一、伪类和伪元素

伪类和伪元素都是用来修饰不在文档树中的部分,区别在于,

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active)。

伪元素则用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after)。

 


 

 

二、常用伪类

伪类

用法

兼容

:link

未访问的链接

主流浏览器都支持

:visited

已访问的链接

主流浏览器都支持

:hover

鼠标划过链接

主流浏览器都支持

:active

 已选中的链接

主流浏览器都支持

:focus

选择元素输入后具有焦点

主流浏览器都支持,IE8中必须申明<!DOCTYPE>

:enabled

元素可用状态下

IE8及更早版本不支持

:disabled

元素禁用状态下

IE8及更早版本不支持

:checked

元素选中状态下

IE8及更早版本不支持

:first-child

选择元素的第一个子元素

主流浏览器都支持,IE8或更早版本中必须申明<!DOCTYPE>

:last-child

选择元素的最后一个子元素

IE8及更早版本不支持

:nth-child()

选择元素的一个或多个特定的子元素

IE8及更早版本不支持

:nth-last-child()

从这个元素的最后一个子元素开始选择元素的一个或多个特定的子元素

IE8及更早版本不支持

:nth-of-type()

选择指定的元素

IE8及更早版本不支持

:nth-last-of-type()

从这个元素的最后一个子元素开始选择指定元素

IE8及更早版本不支持

:first-of-type

选择一个上级元素下的第一个同类子元素

IE8及更早版本不支持

:last-of-type

选择一个上级元素下的最后一个同类子元素

IE8及更早版本不支持

:only-child

选择父级元素下的唯一一个子元素

IE8及更早版本不支持

:only-of-type

选择父元素下的唯一一个相同类型的子元素

IE8及更早版本不支持

:empty

选择元素里面没有任何内容的元素

IE8及更早版本不支持

:not()

选择除了某个元素以外的其他元素

IE8及更早版本不支持

:lang

为不同的语言定义特殊的规则

主流浏览器都支持,IE8中必须申明<!DOCTYPE>

:target

设置元素被设置为锚链接的目标元素时候的样式

IE8及更早版本不支持

:default

设置表单的默认样式

IE8及更早版本不支持

:valid

设置有效的表单元素

IE8及更早版本不支持

:invalid

应用于空的必填的,或者验证失败的表单

IE8及更早版本不支持

:required

应用于具有required属性的表单元素

IE8及更早版本不支持

:optional

应用于没有required属性的表单元素

IE8及更早版本不支持

:in-range

应用于具有范围的限制的元素,比如number表单

IE8及更早版本不支持

:out-of-range

与:in-range相反,指定超出范围时的样式

IE8及更早版本不支持

:read-only

应用于内容只读的元素

IE8及更早版本不支持

:read-write

应用于可供用户修改的元素

IE8及更早版本不支持

:root

指向根元素,即html元素

IE8及更早版本不支持

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

三、常用伪元素 

 

伪元素

说明

兼容

::first-line

选择元素的第一行

主流浏览器都支持

::first-letter

选择文本块的第一个字母

主流浏览器都支持

::before

给元素的前面插入内容

IE8及更早版本不支持

::after

给元素的后面插入内容

IE8及更早版本不支持

::selection

用来改变浏览网页选中文的默认效果

IE8及更早版本不支持

::placeholder

::-webkit-input-placeholde

::-moz-placeholder

:-ms-input-placeholder

设置一个表单元素的占位文本 

IE8及更早版本不支持

以上是关于CSS中伪元素after的作用的主要内容,如果未能解决你的问题,请参考以下文章

使用原生js来控制修改CSS伪元素的方法总汇, 例如:before和:after

使用原生js来控制修改CSS伪元素的方法总汇, 例如:before和:after

浅谈css伪类和伪元素的区别、优先级

伪类选择器与伪元素选择器的区别

伪类选择器,伪类和伪元素的区别

CSS中伪元素前的“&”是啥意思?