likes
comments
collection
share

css伪元素简介(常用)

作者站长头像
站长
· 阅读数 26

在前端项目中,编写css的时候或多或少会接触到伪元素的使用,比如说使用伪元素::before编写必填校验前红色的*。可能会有小伙伴会有想到:hover、:active等伪类,这两者长的比较像,但是是有区别的。

一、伪类

伪类是用来定义元素特殊状态的,他可以用来设置鼠标悬停样式、元素获取焦点样式、设置链接样式等。如常见的 hover、active、link 等都是伪类。

css伪元素简介(常用)

二、伪元素

伪元素也称为伪对象,它不存在于 DOM 文档中、是一个虚拟的元素。它可以用来代表某个元素的子元素,但是这个子元素并不存在于文档树中。

css伪元素简介(常用)

三、如何区分伪类和伪元素

伪类和伪元素的根本区别在于:是否创造了新的元素。

在 W3C 中,对伪类和伪元素的描述是这样的:伪类用于向某些选择器添加特殊的效果,而伪元素用于将特殊效果添加到某些选择器中,也就是说伪元素是对那些不能通过 class 或 id 等选择元素的补充。

四、伪元素使用

本文主要是针对伪元素进行的讲解,伪类就不在此不展开赘述,接下来将对常见伪元素的使用进行示例说明。

4.1 ::before

创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

示例:

css伪元素简介(常用)

代码:

<div class="example-before">伪元素before示例1</div>

.example-before{
    line-height: 20px;
    padding-left: 8px;
    position: relative;
}
.example-before::before {
    position: absolute;
    width: 3px;
    height: 20px;
    background: #1993ff;
    content: "";
    left: 0px;
}

4.2 ::after

用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

示例:

css伪元素简介(常用)

代码:

<div class="example-after">伪元素after示例</div><input type="text">

.example-after {
    display: inline-block;
}
.example-after::after {
    content: "*" ;
    color: #f56c6c ;
    margin-left: 4px ;
    width: 6px;
    font-size: 14px;
    transform: translateY(2px);
}

4.3 ::first-letter

会选中某 block-level element(块级元素)第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格)。

示例:

css伪元素简介(常用)

代码:

<div>为文本首字母添加样式</div>

div::first-letter {
    font-size:30px;
    color: #1993ff;
}

4.4 ::first-line

在某 block-level element (块级元素)的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。

示例:

css伪元素简介(常用)

代码:

<div>为文本首行添加样式,只作用于块级作用域</div>

div {
    width: 150px;
}
div::first-line {
    font-size:30px;
    color: #1993ff;
}

4.5 ::marker

选中一个 list item 的 marker box,后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上,例如

  • 和。

    示例:

    css伪元素简介(常用)

    代码:

    <li>这是一句话</li><li>这是一句话</li>
    <li>这是一句话</li><li>这是一句话</li>
    <li>这是一句话</li><li>这是一句话</li>
    
    body {
        padding: 24px;
        counter-reset: listItem
    }li {
        counter-increment: listItem;
    }
    li::marker {
        content: "序号" counter(listItem) ":";
    }
    

    4.6 ::placeholder

    以选择一个表单元素的占位文本,它允许开发者和设计师自定义占位文本的样式。

    示例:

    css伪元素简介(常用)

    代码:

    <input type="text" placeholder="占位">
    
    input::placeholder{
        color: #1993ff;
    }
    

    4.7 ::selection

    伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。

    示例:

    css伪元素简介(常用)

    代码:

    <div>为文本被选中部分添加样式,仅支持颜色下划线阴影等</div>
    
    div::selection {
        color: #1993ff;
        /* color
           background-color
           cursor
           caret-color
           outline
           text-decoration
           text-emphasis-color
           text-shadow */
    }
    

    五、酷炫效果

    5.1 双边丝带

    示例(参考:juejin.cn/post/685457…

    css伪元素简介(常用)

    代码:

    <div class="bilateral-ribbon">
        <div class="bilateral-ribbon-title"><span>距离元旦还有24天</span></div>
    </div>
    body {
        padding: 48px;
    }
    .bilateral-ribbon-title {
        position: relative;
        display: inline-block;
    }
    .bilateral-ribbon-title span {
        position: relative;
        z-index: 2;
        display: inline-block;
        padding: 0 15px;
        height: 32px;
        line-height: 32px;
        background-color: #dc5947;
        color: #fff;
        font-size: 16px;
        box-shadow: 0 10px 6px -9px rgba(0, 0, 0, 0.6);
    }
    .bilateral-ribbon-title span::before,.bilateral-ribbon-title span::after {
        position: absolute;
        bottom: -6px;
        border-width: 3px 5px;
        border-style: solid;
        content: "";
    }
    .bilateral-ribbon-title span::before {
        left: 0;
        border-color: #972f22 #972f22 transparent transparent;
    }
    .bilateral-ribbon-title span::after {
        right: 0;
        border-color: #972f22 transparent transparent #972f22;
    }
    .bilateral-ribbon-title::before,.bilateral-ribbon-title::after {
        position: absolute;
        top: 6px;
        content: "";
        border-style: solid;
        border-color: #dc5947;
    }
    .bilateral-ribbon-title::before {
        left: -32px;
        border-width: 16px 26px 16px 16px;
        border-left-color: transparent;
    }
    .bilateral-ribbon-title::after {
        right: -32px;
        border-width: 16px 16px 16px 26px;
        border-right-color: transparent;
    }
    

    5.2 铜钱

    示例(参考:wow.techbrood.com/fiddle/3486…

    css伪元素简介(常用)

    代码:

    <div class='coin'>
        <div class='front jump'>
            <div class='star'></div>
            <span class='currency'>$</span>
            <div class='shapes'>
                <div class='shape_l'></div>
                <div class='shape_r'></div>
                <span class='top'>عظمى</span>
                <span class='bottom'>عملة</span>
            </div>
        </div>
        <div class='shadow'></div>
    </div>
    body {
        margin: 0;
        background: #262626;
    }
    span {
        font-family: "Montserrat", sans-serif;
    }
    .jump {
        animation: jump 1.5s infinite ease;
    }
    @keyframes jump {
        0% {
            top: 0;
        }
        50% {
            top: -40px;
        }
        100% {
            top: 0;
        }
    }
    .coin {
        margin: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        height: 150px;
        width: 150px;
    }
    .coin .front {
        position: absolute;
        height: 150px;
        width: 150px;
        background: #ffbd0b;
        border-radius: 50%;
        border-top: 7px solid #ffd84c;
        border-left: 7px solid #ffd84c;
        border-right: 7px solid #d57e08;
        border-bottom: 7px solid #d57e08;
        transform: rotate(44deg);
    }
    .coin .front:before {
        content: "";
        margin: 35.5px 35.5px;
        position: absolute;
        width: 70px;
        height: 70px;
        background: #f0a608;
        border-radius: 50%;
        border-bottom: 5px solid #ffd84c;
        border-right: 5px solid #ffd84c;
        border-left: 5px solid #d57e08;
        border-top: 5px solid #d57e08;
        z-index: 2;
    }
    .coin .front .currency {
        overflow: hidden;
        position: absolute;
        color: #ffbd0b;
        font-size: 40px;
        transform: rotate(-44deg);
        line-height: 3.7;
        width: 100%;
        height: 100%;
        text-align: center;
        text-shadow: 0 3px 0 #cb7407;
        z-index: 3;
        border-radius: 50%;
    }
    .coin .front .currency:after {
        content: "";
        position: absolute;
        height: 200px;
        width: 40px;
        margin: 20px -65px;
        box-shadow: 50px -23px 0 -10px rgba(255, 255, 255, 0.22), 85px -10px 0 -16px rgba(255, 255, 255, 0.19);
        transform: rotate(-50deg);
        animation: shine 1.5s infinite ease;
    }
    @keyframes shine {
        0% {
            margin: 20px -65px;
        }
        50% {
            margin: 70px -85px;
        }
        100% {
            margin: 20px -65px;
        }
    }
    .coin .front .shapes {
        transform: rotate(-44deg);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .coin .front .shapes div {
        width: 20px;
        height: 4px;
        background: #d57e08;
        border-top: 2px solid #c47207;
        margin: 75px 7px;
    }
    .coin .front .shapes div:before {
        content: "";
        position: absolute;
        width: 20px;
        height: 4px;
        background: #d57e08;
        border-top: 2px solid #c47207;
        margin: -10px 0;
    }
    .coin .front .shapes div:after {
        content: "";
        position: absolute;
        width: 20px;
        height: 4px;
        background: #d57e08;
        border-top: 2px solid #c47207;
        margin: 8px 0;
    }
    .coin .front .shape_l {
        float: left;
    }
    .coin .front .shape_r {
        float: right;
    }
    .coin .front .top {
        font-size: 30px;
        color: #d67f08;
        text-align: center;
        width: 100%;
        position: absolute;
        left: 0;
    }
    .coin .front .bottom{
        font-size: 30px;
        color: #d67f08;
        text-align: center;
        width: 100%;
        position: absolute;
        left: 0;    bottom: 0;
    }
    .coin .shadow {
        width: 100%;
        height: 20px;
        background: rgba(0, 0, 0, 0.4);
        left: 0;
        bottom: -50px;
        border-radius: 50%;
        z-index: -1;
        margin: 185px 7px 0 7px;
        animation: swift 1.5s infinite ease;
    }
    @keyframes swift {
        0% {
            opacity: 0.8;
        }
        50% {
            opacity: 0.4;
            transform: scale(0.8);
        }
        100% {
            opacity: 0.8;
        }
    }
    

    Time!(参考资料:developer.mozilla.org/zh-CN/docs/…