[css]伪元素::after和::before的使用

最新推荐文章于 2025-05-28 16:26:10 发布

leo_howl

最新推荐文章于 2025-05-28 16:26:10 发布

阅读量258

点赞数 1

分类专栏：文章文章标签：伪元素 css

本文链接：https://blog.youkuaiyun.com/u013050330/article/details/102988066

版权

文章专栏收录该内容

12 篇文章

订阅专栏

再说为元素的使用之前吗，先介绍一下伪元素以及容易与之混淆的伪类。伪类是为选择器定义效果，二伪元素更倾向与向原有的选器追加一些一般css无法描述的东西，如文字。（完全是个人理解）。

伪类：
常见的伪类：

值	描述
:active	选择器被激活时的样式
:focus	选择器被选中的样式
:hover	鼠标悬浮在选择器上时的样式
:link	a标签未被访问时的样式
:visited	a标签被访问过后的样式
:first-child	该选择器第一个子元素的样式

伪元素:
常见的伪元素：

值	描述
::before	在选择器对应元素之前插入内容
::after	在选择器对应元素之前插入内容

需要注意的是，这里的样式都是非常规意义上的css样式。在css中伪类中伪类和伪元素都是使用单个“:”表示，但是这样确实别叫容易产生混淆。在css3中为了区分伪类和伪元素，采用“::”来表示伪元素，那我们就用“::”来表示伪元素。伪类的用处不用多说，应该都是比较常见的，伪元素中用的比较多的就属::before和::after了。基础应用：在元素的前面或者后面添加如文字这种内容（貌似只添加过文字，也不知到其他的能不能添加）。
点击查看示例

代码清单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pseudo-class-and-pseudo-element</title>
    <style>
        .lists{
            width: 400px;
            height: auto;
            margin: 50px auto;
            padding: 20px;
            font-size: 14px;
            line-height: 1.6em;
            font-family: 'Microsoft YaHei Light';
        }
        .list{
            width: 100%;
            height: auto;
            padding: 5px;
            border-radius: 3px;
            border: #aaa 1px solid;
            background: #fafafa;
            margin:0 0 25px;
            text-indent: 2em;
        }
        small{
            font-size: 14px;
            color: #aaa;
            font-weight: bold;
            line-height: 1em;
        }
        .ele span{
            background: #000;
            color: #fff;
            padding: 5px;
            border-radius: 4px;
        }
        .ele::before{
            content: 'before';
        }
        .ele::after{
            content: 'after';
        }
    </style>
</head>
<body>
<div class="lists">
    <small>在"Hello"前后添加“before”和“after”</small>
    <div class="list ele"><span>Hello</span></div>
</div>
</body>
</html>