css3伪类怎么用

css3伪类怎么用

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

假设我们有如下的HTML代码

<p>paragraph text</p>

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

p:before {
    content: "this is ";
    font-weight: bold;
    font-style: italic;
}

在浏览器中呈现的效果：

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

2、场景二：插入Icons图标

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

比如我们给出一段HTML代码

<p>paragraph text</p>

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

p:before {
    content: "";
    display: block;
    background: url("icon.jpg-600") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

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

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

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

<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-600") no-repeat top right;
    width: 14px;
    height: 12px;
}

在浏览器中呈现的结果：

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

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

以上就是css3伪类怎么用的详细内容，更多请关注0133技术站其它相关文章！