伪元素 订阅
伪对象语言创造的元素不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 展开全文
伪对象语言创造的元素不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
信息
外文名
Pseudo object language
又    称
伪元素
中文名
伪对象语言
伪对象语言伪对象语言
伪对象用于将特殊的效果添加到某些选择器。其语法为:选择器:伪元素{属性:值} [1]  CSS中的伪对象如表1:
收起全文
精华内容
下载资源
问答
  • 伪元素

    2017-07-02 11:08:16
    伪元素

    :before:

    伪元素在元素之前添加内容

    一般格式如下:

    h1:before{
        content:"hahah";
    }
    h1:before
      {
      content:url(beep.wav);
      }

    :after

    伪元素在元素之后添加新内容
    用法与before类似。

    展开全文
  • 2.3伪元素:2.3伪元素
  • CSS 伪元素

    2020-12-14 01:16:11
    CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.class:pseudo-element {property:value;} :first-...
  • 获取伪元素的属性值获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。语法:window....

    获取伪元素的属性值

    获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。

    语法:window.getComputedStyle(element, [pseudoElement])

    参数如下:

    element(Object):伪元素的所在的DOM元素;

    pseudoElement(String):伪元素类型。可选值有:”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”;

    js语法实例:

    var mydiv=document.querySelector('#mydiv');

    var fontSize=window.getComputedStyle(mydiv,'::before').getPropertyValue('font-size');//获取before伪元素的字号大小

    更改伪元素的样式

    通过更换class来实现伪元素属性值的更改:

    举个栗子:

    // CSS代码

    .red::before {

    content: "red";

    color: red;

    }

    .green::before {

    content: "green";

    color: green;

    }

    // HTML代码

    内容内容内容内容

    // jQuery代码

    $(".red").removeClass('red').addClass('green');

    展开全文
  • 目录标题伪类和伪元素封装一个有前缀和后缀的input输入框总结参考 伪类和伪元素 伪类专门用来表示元素的一种特殊的状态。比如:访问过的链接,普通的链接,获取焦点文本框 伪元素表示元素中的一些特殊的位置。比如:...

    伪类和伪元素

    • 伪类专门用来表示元素的一种特殊的状态。比如:访问过的链接,普通的链接,获取焦点文本框
    • 伪元素表示元素中的一些特殊的位置。比如::before表示元素最前面的部分
    • CSS中,::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content属性来为一个元素添加修饰性的内容。此元素默认为行内元素
    • 在CSS3中,通过::创建伪元素,通过:选中伪类。浏览器也接收将::before写做:before

    封装一个有前缀和后缀的input输入框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .my_input {
                position: relative;
                width: 180px;
            }
            .my_input_inner {
                /* input输入框默认的display就是inline-block */
                /* 设置box-sizing */
                box-sizing: border-box;
                /* 宽度为100% */
                width: 100%;
                height: 40px;
                /* 设置输入框的边框颜色 */
                border: 1px solid orange;
                /* 设置outline为none,否则在input状态为focus时会有外边框 */
                outline: none;
                /* 设置输入框的背景颜色 */
                background-color: gray;
                /* 设置输入框的圆角 */
                border-radius: 10px;
                /* 设置光标以及文本的颜色 */
                color: yellowgreen;
                font-size: inherit;
                /* 设置左右内边距为30px 用于展示图标 */
                padding: 0 30px;
                transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            }
            .my_input_inner:focus {
                /* 设置input状态为focus时的边框颜色 */
                border: 1px solid red;
            }
            .my_input_suffix {
                /* 开启绝对定位 */
                position: absolute;
                /* 确定位置 */
                right: 5px;
                /* 设置高度 */
                /* 
                    高度为百分比
                    当前元素的position为absolute
                    所以它的包含块是离它最近的position的值不是static的祖先元素的内边距区域
                    所以百分比是相对于div.my_input的内容区高度而言
                 */
                height: 100%;
                top: 0;
                text-align: center;
                transition: all .3s;
                pointer-events: none;
            }
            .my_input_suffix_icon {
                /* 设置display为inline-block */
                display: inline-block;
                /* 设置宽度 */
                width: 25px;
                /* 设置高度 */
                /* 
                    高度为百分比
                    当前元素的position为static
                    所以它的包含块是离它最近的祖先块元素 也就是span.my_input_suffix
                    所以百分比是相对于span.my_input_suffix的内容区高度而言
                 */
                height: 40px;
                /* 设置行高和 */
                /*
                    设置line-height为40px
                    内部元素会在line-height中居中
                    这样就能呈现视觉上的垂直居中
                */
                line-height: 40px;
                /* 设置行内的内容水平居中 */
                text-align: center;
            }
            .my_input_suffix_icon:before {
                color: pink;
                font-style: normal;
                content: 'X';
            }
            .my_input_preffix {
                position: absolute;
                left: 5px;
                height: 100%;
                top: 0;
                text-align: center;
                transition: all .3s;
                pointer-events: none;
            }
            .my_input_preffix_icon {
                display: inline-block;
                width: 25px;
                height: 40px;
                /* 这里我们换一种垂直对齐方式 */
                /* 这里不设置line-height */
                /* line-height: 40px; */
                text-align: center;
            }
            .my_input_preffix_icon:before {
                color: pink;
                /* 设置高度 */
                height: 100%;
                /* 通过flex来垂直对齐before中的内容 */
                display: flex;
                align-items: center;
                font-style: normal;
                content: 'X';
            }
        </style>
    </head>
    <body>
        <div class="my_input">
            <input type="text" class="my_input_inner">
            <span class="my_input_suffix">
                <i class="my_input_suffix_icon"></i>
            </span>
            <span class="my_input_preffix">
                <i class="my_input_preffix_icon"></i>
            </span>
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    总结

    上面的例子,我们将伪元素垂直居中了,输入框前缀的X采用的是line-height来设置的垂直居中方式。输入框后缀的X采用的是flex来设置的垂直居中方式。

    前缀:设置i标签中的伪元素before和input输入框的高度一样高,并且设置伪元素的line-height和input输入框的高度一样高,那么文本就会在before伪元素中垂直居中,也就是在input中垂直居中了。

    后缀:设置i标签的display属性为flex,并设置内容垂直居中。那么before伪元素就会在i标签中垂直居中,before伪元素没有设置高度,高度有文本X撑开的。

    更多居中方案参考博客:css水平居中方案 垂直居中方案 块级/内联元素居中方案

    参考

    参考博客:https://www.cnblogs.com/mycoke/p/6056187.html

    参考博客:https://www.itranslater.com/qa/details/2582556896884425728

    展开全文
  • * content: attr(placeholder); 内容随着元素属性变化 ... 使得不定宽的伪元素相对父元素居中 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> ...

             * content: attr(placeholder); 内容随着元素属性变化
             * width: max-content; 宽度随着内容而变化
             * left: 50%; transform: translateX(-50%); 使得不定宽的伪元素相对父元素居中

     

    基础知识:

    css中百分比相应参照物:

     

    • top、left、margin、padding、width的百分比都是参照包含块的高度;
    • translate(-50%,-50%)中的百分比是参照自身的宽高;
    • background-position的百分比参照的是(图片区域-图片位图像素值);

     

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>伪元素灵活应用</title>
        <style>
            .btn{
                position: relative;
                display: inline-block;
                margin-right: 20px;
                width: 25px;
                height: 25px;
                background: #9a9ae2;
                cursor: pointer;
            }
            /**
             * content: attr(placeholder); 内容随着元素属性变化
             * width: max-content; 宽度随着内容而变化
             * left: 50%; transform: translateX(-50%); 使得不定宽的伪元素相对父元素居中
             */
            .btn:hover::after {
                content: attr(placeholder);
                display: inline-block;
                position: absolute;
                top: 33px;
                left: 50%;
                transform: translateX(-50%);
                width: max-content;
                padding: 5px 13px;
                height: 28px;
                line-height: 28px;
                font-size: 14px;
                color: #fff;
                text-align: center;
                background: black;
            }
        </style>
    </head>
    
    <body>
    <div style="margin: 100px">
        <span class="btn" placeholder="刷新"></span>
        <span class="btn" placeholder="添加记录"></span>
        <span class="btn" placeholder="永久删除记录"></span>
    </div>
    </body>
    
    </html>

     

    展开全文
  • CSS 伪元素CSS 伪元素用于向某些选择器设置特殊效果。语法伪元素的语法:selector:pseudo-element {property:value;}CSS 类也可以与伪元素配合使用:selector.class:pseudo-element {property:value;}:first-line ...
  • 之前介绍了8种选择器,基本上可以应对大部分的开发需求,但是如果不会使用伪类和伪元素,就跟下面的图差不多,后面会摔的。伪元素和伪类虽然不是特别常用,但是,很好用,可以帮你省掉很多无用功,效果还好。下面直接...
  • CSS伪元素:first-line;:first-letter:before:after:first-line 伪元素"first-line" 伪元素用于向文本的首行设置特殊样式。p:first-line{color: #ff0000;font-variant: small-caps}浏览器会根据 "first-line" 伪元素...
  • 本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文。本文讲解的伪元素有:before,after.什么是伪元素(Pseudo element)?伪元素不是真正的元素,不存在与文档之中,所以js无法操作他。那为什么叫他“元素”?...
  • 一、CSS 伪元素用于向某些选择器设置特殊效果。 1、:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 p:first-line { color:#ff0000; font-variant:small-caps; } 注释...
  • 伪元素与元素定位

    2020-10-22 20:30:58
    伪元素与元素定位 伪元素 before after selection placeholder 1. before 语法: 元素::before 作用: 1.创建一个伪元素,放到匹配的标签元素前面 2.通过 content 样式属性,来为伪元素添加修饰性的内容 特点: ...
  • 1. 伪元素:可以当做html标签用css样式来...(3)通过css选择器选中伪元素,对伪元素进行修改,而不是通过css创造了伪元素。 (4)content设置伪元素的文字内容,即使没有文字,也必须存在。 (5)伪元素的默认di...
  • 伪元素和伪类的区别总结

    万次阅读 多人点赞 2019-05-27 18:00:22
    其中伪类和伪元素的根本区别在于:它们是否创造了新的元素。 伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,578
精华内容 6,631
关键字:

伪元素