全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11181416.html

1、什么时候用伪类:before和:after?

结合实际开发情况,说一点自己的理解~

(1)原本这两个伪类核心是content,用于在指定元素之前或之后插入内容,但实际开发中用的比较多的是传空字符串"",再做样式控制。

(2)用户操作促使样式改变我们通常是采用添加类/删除类、类名切换等方法控制,但这种情况是针对已存在某dom元素,我们去控制该dom元素的样式显示。

(3)对于需要新增一个只包含样式的dom(无数据交互,也不需要通过js操作该dom)且原本不存在的情况,我们可以采用伪类实现,常用于绘图。

例如:用户点击按钮后我们需要在按钮中绘制一个点,这种情况我们就可以采用伪类,这样可以简化页面dom树结构,仅通过样式进行控制。

2、如何通过伪类进行绘图?以微信聊天框样式绘制为例:

HTML代码如下:可见原本一个聊天框需要3个div dom元素(一个背景框、小尖和小尖边框)才能实现,通过伪类1个便搞定~

<div class="main">
<div class="test-div">今天中午吃啥?</div>
<div class="test-div2">吃饭</div>
</div>

CSS代码如下:

        .main{
height: 300px;
padding: 50px;
background-color: #FFCD80;
}
.test-div{
line-height: 36px;
text-align: center;
margin-left: 20px;
position: relative;
width: 150px;
height: 36px;
border-radius: 5px;
border: 1px solid #7f7f7f;
background: #f0f0f0;
}
.test-div:before, .test-div:after{
content: "";
position: absolute;
border: 6px solid transparent;
top: 12px;
}
.test-div:before{
left: -11px;
border-right-color: #f0f0f0;
z-index:;
}
.test-div:after{
left: -12px;
border-right-color: #7f7f7f;
z-index:;
} .test-div2{
line-height: 36px;
text-align: center;
margin-top: 20px;
margin-left: 20px;
position: relative;
width: 150px;
height: 36px;
border-radius: 5px;
border: 1px solid #7f7f7f;
background: #f0f0f0;
} .test-div2:before, .test-div2:after{
content: "";
position: absolute;
border: 6px solid transparent;
top: 12px;
}
.test-div2:before{
right: -11px;
border-left-color: #f0f0f0;
z-index:;
}
.test-div2:after{
right: -12px;
border-left-color: #7f7f7f;
z-index:;
}

原理说明:

(1)小尖的实现:利用对长宽为0的块级元素的border属性画三角形,border-left及border-right颜色设置决定了小尖的朝向;

(2)小尖边框的实现:利用:before和:after伪类画两个大小相同的三角形,但相对位置左右偏移差1px,并且白色的三角形覆盖黑色的三角形,黑色三角形自然成了白色三角形的边框;

css伪类:before及:after除了插入文字内容还能做点儿啥?画图的更多相关文章

  1. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  2. 【转载】CSS 伪类-:before和:after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

  3. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  4. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  5. 【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  6. css伪类实现行号自动填充

    css伪类实现行号自动填充 大多数时候我们需要行号自动填充的时候我们可以 大多数时候是插入元素, 在元素里用js填入行号,或者用 ol > li 实现行号填充, 对于上面的方式,都不太灵活,而且 ...

  7. CSS:CSS 伪类(Pseudo-classes)

    ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法 伪类的语法: ...

  8. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  9. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

随机推荐

  1. android studio学习---模板

    Android Studio还为开发人员提供多种模板选项,从而大大提升开发速度.这些模板能自动创建Activity以及必要的XML文件.大家还可以利用这些模板创建出较为基础的Android应用程序,并 ...

  2. Git的下载安装

    下载地址:https://git-scm.com/download/win 命令: git add ...  ---将资源放到缓存区域 git commit  -m "提交说明"  ...

  3. Linux的IP详解

                        俗话说:黑发不知勤学早,白首方悔读书迟.                                                             ...

  4. 三、requests模块

    Requests: 让 HTTP 服务人类 虽然Python的标准库中 urllib2 模块已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 “ ...

  5. Caused by: java.lang.ClassNotFoundException: Cannot find class:

    Caused by: org.apache.ibatis.builder.BuilderException: Error resolving class. Cause: org.apache.ibat ...

  6. 【oracle】ORA-12638

    背景:换电脑时将旧电脑的ORACLE的登陆信息转到新电脑.其中有三个文件:listener.ora   sqlnet.ora  tnsnames.ora 解决办法:删了sqlnet.ora 原因:

  7. Scrapy笔记07- 内置服务

    Scrapy笔记07- 内置服务 Scrapy使用Python内置的的日志系统来记录事件日志. 日志配置 LOG_ENABLED = true LOG_ENCODING = "utf-8&q ...

  8. 各类app的小结

    各类app小结: 一.原生app: 二.webapp:   无法调用底层设备的api 三.混合app的方法: 1.原生app 嵌入 2.flutter 3.react native 4.AppCan( ...

  9. SDOI 2019 R2 摸鱼记

    其实并没有什么动力来写这篇游记,毕竟呢,明明已经做好了被吊打的心理准备,可是当 Day 2 挂到没分时,当看到自己在高一里还排名二十时,还是有些,有些难言的滋味.学长们该走的真的都走了,就要只剩下 z ...

  10. B 题解————2019.10.16

    相信他说的话,但不要当真 [题目描述]有一个长度为 n 的自然数序列 a,要求将这个序列恰好分成至少 m 个连续子段. 每个子段的价值为该子段的所有数的按位异或.要使所有子段的价值按位与的结果最大,输 ...