伪元素写竖线_[CSS] 用伪元素:after实现分割线和气泡
学习前端网页开发并将其应用于工作中已经两个月了,发现前端包括的内容真的是无比丰富,知识量巨大……漫漫长路远,尚需艰苦努力。作为一只前端开发的菜鸟,写不了特别深刻的关于前端技术性文章,只是想将工作中遇到比较有意思的内容收集整理一下,理解一下,分享一下,希望对自己有所帮助,如果也能给读者带来一些帮助和启发,将不甚荣幸……闲话少说,进入正题。
在网页设计中显示分割线可以使用元素的border单边显示即可,但是这种方法会增大元素的长度或者宽度,在元素需要精细计算以便达到布局效果的情况下,添加border往往会打乱布局。比如下面的html代码,想实现两个horizontal-cell的div水平排列,并且各占父节点的50%的宽度,并且中间要添加分割线。
如果我们只是简单在separator类的样式的中添加border-left 属性,虽然也添加了分割线,但是会影响两个horizontal-cell类的div布局将会从横向变成纵向,打乱了布局。为解决这个问题,可以使用伪元素:after,css代码如下:
/*两个元素各占50%的宽度在水平方向显示,添加分割线*/
.horizontal-cell{
float: left;
width: 50%;
background: light green;
}
.separator{
position: relative;
}
.separator:after{
position: absolute;
top:0.1em;
height: calc(100% - 0.2em);
left:0;
content: '';
width:0;
border-left: solid darkblue 1px;
}
分割线效果图.png
.separator:after 伪元素会浮在horizontal-cell类的元素之上,不会挤用横向的空间,.separator:after中用border-left属性来实现竖直分割线的显示。我们也可以用同样的方法实现水平的分割线。
用类似的方法我们也可以在垂直排列的内部文字需要对齐的列表上打标记。html代码和相应的css代码如下:
/*前置色块标记*/
.cell0{
padding-left: 1.2em;
background: lightgrey;
text-align: left;
}
.mark {
position: relative;
}
.mark:after{
position: absolute;
top:0;
height: 100%;
left:0;
content: '';
width:0;
border-left: solid #5dd7bf 0.6em;
}
.left-border{
border-left: solid #5dd7bf 0.6em;
}
效果图如下:
加标记效果图.png
效果图中第三行的样式没有使用:after,与第二行对比可以看出,虽然也加了标记,但是却没有与第一行中的文本进行对齐。
:after除了实现分割线、标记色块,还有一个非常有用的应用就是实现类似手机对话框的气泡,可以看如下代码:
/*气泡相关,可以用于显示对话框等等*/
.bubble{
position: relative;
padding: 0.75em;
color: #ffffff;
font-size: 0.9em;
line-height: 1.3em;
text-align: left;
border-radius: 0.5em;
margin-left: 3.6em;
margin-top: 1.2em;
margin-bottom: 1.2em;
margin-right: 5.2em;
float: left;
background-color: #60d8ce;
height: 4em;
}
.bubble:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 15px solid rgba(0, 0, 0, 0);
border-left-width: 0;
}
.bubble-left:after {
border-right-color: #60d8ce;
top: 0%;
right: 100%;
margin-top: 0.9em;
border-left-width: 0.0em;
border-right-width: 0.6em;
border-bottom-width: 0.4em;
border-top-width: 0.4em;
}
.bubble-right:after {
border-left-color: #60d8ce;
top: 0%; left: 100%;
margin-top: 0.9em;
border-right-width: 0.0em;
border-left-width: 0.6em;
border-bottom-width: 0.4em;
border-top-width: 0.4em;
}
.bubble-top:after {
border-bottom-color: #60d8ce;
left: 0%;
bottom: 100%;
margin-left: 1.9em;
border-top-width: 0.0em;
border-bottom-width: 0.6em;
border-left-width: 0.4em;
border-right-width: 0.4em;
}
.bubble-bottom:after {
border-top-color: #60d8ce;
left: 0%;
top: 100%;
margin-left: 1.9em;
border-bottom-width: 0.0em;
border-top-width: 0.6em;
border-left-width: 0.4em;
border-right-width: 0.4em;
}
气泡箭头部分的实现与之前例子中的分割线类似,都是用伪元素:after 的border的宽度和颜色透明与否来实现长方形或者三角形箭头的形状,然后通过left、right、top、bottom等等属性调整:after伪元素与圆角对话框元素的相对位置,来实现气泡的形状。
气泡效果图.png
综合来看,以上所提到伪元素:after来实现分割线和气泡,方法是类似的,关键点是元素的CSS的position属性要设置成relative,而与之相应的:after伪元素(用来形成三角形或者矩形)的position属性要设置成absolute,这样:after伪元素才能够调整与元素的相对位置,然后改变:after伪元素的展现的形状,从而实现分割线、标记和气泡等效果。
由于是前端开发的菜鸟,以上关于伪元素:after的应用只是提到了一点皮毛,只是做一点小小的归纳,希望随着自己学习的深入,以后关于前端的技术文章能写得更加深入。以上贴出来的代码部分,已经比较完整,复制粘贴到工程里,完全可以实现以上效果图显示的效果。完整源码下载
伪元素写竖线_[CSS] 用伪元素:after实现分割线和气泡相关推荐
- 伪元素写竖线_用伪元素画出太极图
本博客介绍了如下内容: 1.伪元素的特征: 2.如果不通过伪元素,普通小白画八卦图方法: 3.如何通过伪元素装逼方法来画八卦图方法: 4.介绍了渐变色的生成工具和动画生成工具: 5.伪元素的注意问题. ...
- 伪元素写竖线_欧洲杯 | 让我们做个时髦伪球迷
男票在看球你只能跟着嗑瓜子 电视上播的什么你完全是一脸懵逼! 对于运动神经普遍不是很发达的女生来说 欧洲杯什么的基本就是一件纯凑热闹的事情 偶尔出现一两个帅气逼人的球员才能稍微打起点精神来 ▼ 俗话说 ...
- 伪元素写竖线_CSS的伪类和伪元素
之前介绍了8种选择器,基本上可以应对大部分的开发需求,但是如果不会使用伪类和伪元素,就跟下面的图差不多,后面会摔的.伪元素和伪类虽然不是特别常用,但是,很好用,可以帮你省掉很多无用功,效果还好.下面直 ...
- html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...
- html css链接伪类大全,什么是css链接伪类?
什么是css链接伪类?下面本篇文章就来给大家介绍一下css链接伪类是什么?有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 什么是css链接伪类? css链接伪类就是css内置 ...
- html div 子元素 过多 卡顿,CSS不定高元素transition动画的解决方案
CSS不定高元素transition动画的解决方案 类别: 技术·CSS 时间:2019-07-27 23:41:35 字数:3297 版权所有,未经允许,请勿转载,谢谢合作~ ### 前言 CSS中 ...
- html伪元素before占用高度,CSS:伪元素:before和:after从原始元素继承宽度/高度...
我使用css伪元素:之前和:之后给一个缩进效果我的一些网站上的图像.但是,如果不指定宽度和高度,这些将不显示.这将让我为每个图像指定一个固定的宽度和高度,我猜这将适用于一个静态网页. 然而,因为这些图 ...
- 伪元素进度条_使用HTML5进度元素
伪元素进度条 Aimless browsing on the web is changing to a goal-directed activity: uploading a file, comple ...
- 伪元素在父元素中居中_魔法中的元素属性知识
在魔法中,元素非常重要,今天我们就来给大家普及一些元素相关的知识和对应. 精神 (希伯来语是Eth) 精神是第五元素.相对而言它似乎是高于其他元素的,它的性质是抽象且无法描述的.它有时被称为精华或哲学 ...
最新文章
- 完整代码+实操!手把手教你操作Faster R-CNN和Mask R-CNN
- 分享Kali Linux 2016.2第45周VMware虚拟机
- 一、安装Docker CE
- 关于ABAP流程处理的一些命令的说明(stop,exit,return,check,reject)
- 5334. 【NOIP2017提高A组模拟8.24】空
- OXite解读(1)----- 概述
- mysql-5.7.17的最新安装教程
- vue rule鼠标移走校验_Vue-cli+Element-ui实现后台管理系统(二)实现后台登录功能...
- web前端基础(14html里面的事件)
- 将多个markdown文件发布为一个html或pdf文件的方法梳理
- PHP Notice: undefined index xxx
- bzoj1385 [Baltic2000]Division expression
- cad2017单段线_CAD制图规定-2017最新版.doc
- 如何用OpenCV给图片加上文字?
- VR眼镜连接android设备,华为VR眼镜连接电脑教程
- springcloud后端集成支付宝支付踩坑记
- 如何释放计算机内存吗,教您如何有效释放计算机内存空间!
- 教师资格证面试试讲规律!
- 数影周报:SpaceX设计图纸被泄露,拍明芯城正式在纳斯达克上市
- ESP8266-NodeMCU物联网开发之Arduino环境搭建