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;
}

参考链接

掘金:CSS伪元素:before和:after介绍

css伪元素::before与::after使用基础示例的更多相关文章

  1. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  2. css 伪元素分享!!!

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  3. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  4. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  5. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  6. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  7. js如何控制css伪元素内容(before,after)

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  8. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  9. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

随机推荐

  1. NO6 alias-unalias命令,递归创建目录,如何取消覆盖提示

    ·如果需要更新补丁则执行:·yum update·yum install lrzsz telnet tree nmap nc -y·alias #查看系统现有的别名.        一.设置别名eg: ...

  2. GeneWise

    GeneWise是用于将蛋白质序列进行同源预测的软件

  3. 微信群API接口

    安卓微信的api,个人微信开发API协议,微信 ipad sdk,微信ipad协议,微信web版接口api,微信网页版接口,微信电脑版sdk,微信开发sdk,微信开发API,微信协议,微信接口文档sd ...

  4. 01-JAVA语言基础——课程作业1—编写一个程序,此程序从命令行接收多个数字,求和之后输出结果。

    1.题目:编写一个程序,此程序从命令行接收多个数字,求和之后输出结果. 2.程序设计思想: 通过运行配置输入数字后,其保存类型为String类型,因此需要采用Integer.valueOf(arg)将 ...

  5. mysql 索引使用教程

    1.什么索引 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的位置信息.更通俗的说,数据库索引好比是一本书前面的目录,能加快数据库的查询速度. ...

  6. 转载:Nginx做反向代理和负载均衡时“X-Forwarded-For”信息头的处理

    转载自:https://blog.51cto.com/wjw7702/1150225 一.概述 如今利用nginx做反向代理和负载均衡的实例已经很多了,针对不同的应用场合,还有很多需要注意的地方,本文 ...

  7. CodeForces - 710E Generate a String (dp)

    题意:构造一个由a组成的串,如果插入或删除一个a,花费时间x,如果使当前串长度加倍,花费时间y,问要构造一个长度为n的串,最少花费多长时间. 分析:dp[i]---构造长度为i的串需要花费的最短时间. ...

  8. 使用Linux系统,是一种什么体验?

    导读 同事,从事嵌入式软件开发多年,主要开发环境用的就是linux,最疯狂的一段时间直接把系统装成linux系统,然后在linux下面虚拟一个windows操作系统,主要有些事情必须在windows才 ...

  9. 微软于 snapcraft 上发布 Visual Studio Code 的 Snap 打包版本

    微软在 snapcraft 上发布了 Visual Studio Code 的 Snap 打包版本 .Snap 是 Canonical 主导开发的应用打包格式,与 Flatpak 和 AppImage ...

  10. content编码

    1.content有5种属性 a.content:“”                     //为空 b.content:attr(TItle)     //可以获取当前选中标签的属性值 eg: ...