css :before :after的使用
版权声明:本文为博主原创文章,未经博主允许不得转载。
项目中有时会遇到伪类,即:before,:after,如果要实现在每行文字的左右两边加上-就可以使用:before :after
html代码:
<ul><li>我是li1</li><li>我是li1</li></ul>
ul {width: 200px;
}
li {list-style: none;background: #ccc;margin-bottom: 5px;
}
li::before {content: '-';color: red;
}
li::after {content: '-';color: blue;
}
有时会实现各种小三角,效果为:
html:
<div class="top-triangle"></div>
<div class="bottom-triangle"></div>
<div class="left-triangle"></div>
<div class="right-triangle"></div>
css为:
/* 上三角 */
.top-triangle {width: 0;height: 0;border: 20px solid transparent;border-bottom: 20px solid yellow;margin-bottom: 5px;
}
/* 下三角 */
.bottom-triangle {width: 0;height: 0;border: 20px solid transparent;border-top: 20px solid yellow;
}
/* 左三角 */
.left-triangle {width: 0;height: 0;border: 20px solid transparent;border-left: 20px solid yellow;
}
/* 右三角 */
.right-triangle {width: 0;height: 0;border: 20px solid transparent;border-right: 20px solid yellow;
}
有时会实现微信对话,效果为:
这里html代码为:
<!-- 对话框 --><div class="left"><p>最近怎么样</p></div><div class="right"><p>挺好的,最近有点忙,没有怎么联系你</p></div>
css代码为:
.left,.right{min-height: 40px;position: relative;display: table;text-align: center;border-radius: 7px;background-color: #9EEA6A;margin: 0;
}
.left {left: 10px;
}
.left::before,
.right::after {position: absolute;content: '';display: inline-block;width: 0;height: 0;border: 8px solid transparent;top: 11px;}
.left::before {border: 8px solid transparent;border-right: 8px solid #9EEA6A;left: -16px;
}
.right::after {right: -16px;border-left: 8px solid #9EEA6A;
}
.left p,
.right p {display: table-cell;vertical-align: middle;padding: 0 10px;
}
.right {right: -150px;
}
css :before :after的使用相关推荐
- ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题 思路 问题:首先,li 浮动后,添加边框,则 中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
- 【css】基础学习总结
填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...
- Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
- CSS 选择器:BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
- CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突 要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
- css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...
- 前端之css基础学习(更正版)
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...
- div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
- CSS单位分析及CSS颜色表示法、颜色表(调色板)
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...
- 前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
最新文章
- JavaScript学习五
- Android之深入WebView
- ATK - Accessibility Toolkit - 辅助功能工具包
- Leecode刷题热题HOT100(6)——Z 字形变换
- one stage 与two stage解释
- 20165221 JAVA第四周学习心得
- 青灯教育python免费公开课_如何使用Python爬取抖音APP视频
- 怎么做自媒体,这份入门攻略,建议收藏
- linux 防火墙 防ddos,Linux防火墙iptables以及如何防御DDOS攻击
- 工作组可以看到计算机 但是无法访问,Win7中工作组计算机无法访问解决技巧
- Kingbase8开发版,启动提示FATAL: XX000: max_connections should be less than orequal than 10
- 广告系统,业务与架构细节
- 20210726 java基础复习
- 批量将所有图片的宽度和高度调整为固定的像素数值
- class ts 扩展方法_ts各种类型和用法
- 范里安中级微观经济学(第9版)分析笔记和课后习题答案解析-完整版 范里安《微观经济学:现代观点》(第9版)笔记和课后习题详解!
- 变身“流程公司” 什么工作流合适
- 113.输入10个国家的名字,按由小到大排序
- Android 获取视频宽高
- 优思学院|取得美质协(ASQ)六西格玛黑带(CSSBB)的个人经验谈