8 人参与回答
最佳回答
may90
may90 · 我是may90_com个人博客站长,免费分享SEO优化、SEO技术、SEO资源等知识。

使用场景一:插入内容

假设我们有如下的HTML代码

<p>paragraph text</p>

我们可以用伪元素添加内容比如:

p:before {

    content: "this is ";

    font-weight: bold;

    font-style: italic;

}

浏览器中呈现的效果:

1

请记住,实际上这种做法是在内容之前或之后添加元素。它不是出现在所选元素旁边的东西,而是与其内容有关。

场景二:插入Icons图标

通过伪元素:before and :after 插入图标是非常流行的做法。因为我们可以给伪元素添加几乎任何CSS样式属性(常见的情况是:创建的伪元素是一个块并附加背景图像)

比如我们给出一段HTML代码

<p>paragraph text</p>

通过伪元素方式添加icon图标

p:before {

    content: "";

    display: block;

    background: url("icon.jpg") no-repeat;

    width: 20px;

    height: 20px;

    float: left;

    margin: 0 6px 0 0;

}

在浏览器中呈现的结果如下:

2

使用场景三:给链接添加额外的样式

有时候,将不同风格的链接指向外部资源是一种很好的做法。通过伪元素的方式,可以很容易地实现它。假设我们有以下几段文字:

<p>Krasimir Tsonev is <a href="">developer</a>

who likes to write and <a href="">tweet</a>.</p>

我们可以在该链接之后添加一个小图标,指示它指向当前域外部的页面。

a {

    text-decoration: none;

    font-weight: bold;

    color: #000;

}

a:after {

    content: "";

    display: inline-block;

    background: url("icon-external.jpg") no-repeat top right;

    width: 14px;

    height: 12px;

}

在浏览器中呈现的结果:

3


使用伪元素:before and :after 最大的好处是可以在不添加新的DOM节点的情况下对HTML进行样式设置。 CSS是前端控制视觉的工具,结合伪元素,可以轻松完成很多精巧的设计,好看的样式。


老房装修
老房装修 · 老房装修公司

学习了

搜外用户
搜外用户 · 来搜外学习的一名普通用户

通过伪元素的方式,可以很容易地实现它

就是相当于在你写的那个元素后面使用这个样式

程东
程东 · 免费注册公司就找云算账

学习了

施先生
施先生 · 资深的SEO/SEM工作者和管理者

after顾名思义是在元素后面的意思,实质是在元素之后添加内容。

注意:after伪类ie6、ie7都是不支持的

只有firefox、chrome、safari才支持

G
GH

其实你可以这样简单理解,CSS 伪类就是用于向某些选择器添加特殊的效果。比如

在每个 <p> 元素后面插入内容,并设置所插入内容的样式:

p:after
{
content:"最爱";
background-color:yellow;
color:red;
font-weight:bold;
}

比如原来的标签是<p>我的</p>,加了p:after之后就变成<p>我的最爱</p>,希望能够帮到你!

SEO培训招生中
146