html怎么添加伪类,css3伪类怎么用

css3伪类怎么用

1、使用场景一：插入内容

假设我们有如下的HTML代码

paragraph text

我们可以用伪元素添加内容比如：p:before {

content: "this is ";

font-weight: bold;

font-style: italic;

}

在浏览器中呈现的效果：

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

2、场景二：插入Icons图标

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

比如我们给出一段HTML代码

paragraph text

通过伪元素方式添加icon图标p:before {

content: "";

display: block;

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

width: 20px;

height: 20px;

float: left;

margin: 0 6px 0 0;

}

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

3、使用场景三：给链接添加额外的样式

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

Krasimir Tsonev is developer

who likes to write and tweet.

我们可以在该链接之后添加一个小图标，指示它指向当前域外部的页面。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;

}

在浏览器中呈现的结果：

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

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！