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

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

伪类:
常见的伪类:

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

伪元素:
常见的伪元素:

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

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

代码清单


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pseudo-class-and-pseudo-elementtitle>
    <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>Hellospan>div>
div>
body>
html>

你可能感兴趣的:(文章)