🤓
blog-article
  • Introduction
  • 面试题
    • 1. 输入url发生了什么
  • Personal Works
    • 1. 简单的Web图床
  • CSS动画笔记
    • 1.transition 属性
    • 2.transition 实例
  • css 笔记
    • 1. box-shadow 阴影
    • 2. columns 设置列宽和列数
    • 3. 伪元素after与before
  • html 笔记
    • 1. 不常用的h5标签杂记
  • webpack4
    • 1. 文档学习记录
    • 2. 加载CSS
    • 3. 加载less
    • 4. 加载sass
    • 5. 根据浏览器自动添加css前缀
    • 6. 图片文件处理
    • 7. 字体文件处理
    • 8. 引入jQuery
    • 9. 打包HTML文件
    • 10. 分离css插件
    • 11. babel简单使用
    • 12. 清理旧打包文件插件
    • 13. 拷贝静态资源
  • javascript
    • 1. js获取某年某月的天数
  • npm
    • 2. JSON.stringify()完整用法
    • 1. 入门篇
    • 2. 进阶篇
  • Node.js
    • 1. 使用koa-body中间件后ctx.request.body内容为空
    • 2. uni-app使用Node+Koa2接收上传的文件
  • SQL
    • 1. 查询
    • 2. 插入
    • 3. 修改
    • 4. 删除
    • 5. 期末复习
  • Git
    • 1. git add命令后出现another git process...问题
    • 2. 将文件从暂存区移除
  • vue-cli
    • 1. vue-cli(脚手架)引入vue.config.js文件后热更新失效,每次保存都会刷新页面
  • uni-app
    • 1. uni-app中不使用scroll-view组件,监听页面滑直底部事件
  • 设计模式
    • 创建型模式
    • 单例模式
    • 工厂模式
    • 抽象工厂模式
  • Spring boot
    • 1. 使用自定义参数注解获取 token 中User数据
  • IDEA
    • 1. 设置maven项目的默认配置
  • Linux
    • 1.常用命令
    • 2.常用基础命令2
    • 3.linux目录介绍
    • 4. vi编辑器使用
    • 5.用户管理
    • 6. 文件属性与权限操作
    • 7. 文件归档与解压缩
    • 8. gcc的基本用法
    • 9. gdb调试器的基本用法
    • 10. Makefile基本用法
  • shell
    • shell与crontab定时器的结合
    • 1. shell 变量与常见符号
    • 2. shell中的四则运算符
    • 3. 条件判断
    • 4. 输入输出
    • 5. 输出彩色的内容
    • 6. 流程控制
    • 7. 函数
  • Docker
  • 嵌入式系统给结构及原理
  • 学校课程笔记
    • 1. java EE 复习
    • 2. 马原复习论述题
    • 3. 嵌入式软件技术复习
    • 4. 嵌入式操作系统复习
    • 5. 马原选择题
    • 6. 马原辨析题
    • 7. 马原材料题
    • 8. 计网学习笔记
    • 9. 计网复习
      • 1. 第一章
Powered by GitBook
On this page
  • 1.指定文本前后添加内容
  • 2. 实现一个书签标记logo
  • 3.文字前后自动加上引号
  • 4.自定义样式实现checkbox
  • 6. 相片堆叠

Was this helpful?

  1. css 笔记

3. 伪元素after与before

Previous2. columns 设置列宽和列数Nexthtml 笔记

Last updated 5 years ago

Was this helpful?

1.指定文本前后添加内容

图片
<div class="box">test</div>
.box::before{
    content: 'before';
    margin-right:10px ;
}
.box::after{
    content: 'after';
    margin-left:10px ;
}

2. 实现一个书签标记logo

<div class="mark">
    标<br>记
</div>
.mark{
    width: 30px;
    height: 55px;
    color: #fff;
    border-radius: 3px 3px 0 0;
    background-color: red;
    text-align: center;
    position: relative;
    &::after,&::before{
        position: absolute;
        content: '';
        display: block;
        border: 15px solid transparent;
    }
    &::after{
        right: 0;
        border-right: 15px solid red;
        bottom: -15px;
    }
    &::before{
        left: 0;
        border-left: 15px solid red;
        bottom: -15px;
    }
}

3.文字前后自动加上引号

<div class="code">
    content
</div>
.code{
    margin-top: 20px;
    &::before{
        content: "\"";
        color: red;
    }
    &::after{
        content: "\"";
        color: blue;
    }
    &:hover{
        &::before,&::after{
            background-color: yellowgreen;
        }
    }
}

4.自定义样式实现checkbox

<label for="moreAction">
    <input id="moreAction" type="checkbox">
    <span class="fw-checkbox"></span>
    <span>测试</span>   
</label>
#moreAction{
    display: none;
}
.fw-checkbox{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    border: 1px solid #000;
    border-radius: 2px;
}

#moreAction[type="checkbox"]:checked{
    +.fw-checkbox{
        background-color: crimson;
    }
    +.fw-checkbox::before{
        position: absolute;
        display: inline-block;
        content: '';
        width: 6px;
        height: 10px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        left: 3px;
        bottom: 3px;
    }
}
  1. 简单实现一个聊天气泡

<div class="bubble">
    <img src="http://img.cdn.sugarat.top/mdImg/MTU3OTY5OTUwMDM1Mw==579699500353" alt="">
    <div class="chat">66666!!!</div>
</div>
.bubble{
    display: flex;
    align-items: center;
    img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 20px;
    }
    .chat{
        position: relative;
        background-color: cyan;
        padding: 6px;
        border-radius: 4px;
        box-sizing: border-box;
        &::before{
            content: '';
            position: absolute;
            left: -20px;
            border: 10px solid transparent;
            border-right: 10px solid cyan;
        }
    }
}

6. 相片堆叠

 <div class="img-area">
    <div class="pic">
            <img src="http://img.cdn.sugarat.top/mdImg/MTU3OTY5OTUwMDM1Mw==579699500353" alt="">
        </div>
</div>
.pic{
    position: relative;
    img{
        width: 100%;
        height: 100%;
    }
}

.pic,
.pic::after,
.pic::before{
    width: 200px;
    height: 150px;
    border: 6px solid #fff;
    box-shadow: 2px 2px 5px #ddd;
}

.pic::after,
.pic::before{
    content: '';
    position: absolute;
    background:#eff4de ;
    border: 6px solid #fff;
}

.pic::after{
    transform: rotate(-2deg);
    z-index: -2;
    left: 0px;
}

.pic::before{
    transform: rotate(-5deg);
    z-index: -1;
    left: 0px;
}
图片
图片
图片
图片
图片