说说css伪元素::before和::after,你就会明白我们为什么需要它
wxml
<view class='weui-loading'>#000</view> <view class='btn'><text class='green'>前面</text>#000</view>
css
/*
说说伪元素::before和::after,也许你会更加清晰 */ .weui-loading {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
font-size: 18px;
text-align: center;
color: #000;
text-decoration: none;
line-height: 2.55555556;
border-radius: 5px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: hidden;
} /* 为了兼容低版本,使用:before */
.weui-loading:before {
} .weui-loading::before {
content: '前面';
color: #179b16;
} /* 为了兼容低版本,使用:after */
.weui-loading:after {
} .weui-loading::after {
/* 如果content,也就是内容不连接的话,那么content就不会起作用 */
content: '后面';
color: #ec350c;
border: 1px solid #ddd;
width: 200%;
height: 200%;
position: absolute;
top:;
left:;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 10px;
} .btn {
color: #000;
width: 180rpx;
text-align: center;
padding: 2%;
border-radius: 5px;
border: 1px solid #ddd;
margin-top: 1%;
} .btn .green{
color: #179b16;
}
如果需要设置一个样式前面的文字是绿色,中间的字体是黑色,而后面的字体是红色,我们怕是要写多少样式了.
说说css伪元素::before和::after,你就会明白我们为什么需要它的更多相关文章
- jQuery如何改变css伪元素样式
首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
- css 伪元素分享!!!
最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- (六)CSS伪元素
CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...
- CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...
- css伪元素
CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...
- js如何控制css伪元素内容(before,after)
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
- css伪元素用法大全
本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...
- js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- CSS伪元素before、after妙用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- python中deque类详解
最近在pythonTip做题的时候,遇到了deque类,以前对其不太了解,现在特此总结一下 deque类是python标准库collections模块中的一项,它提供了两端都可以操作的序列,这意味着, ...
- bootstrapValidator关于verbose需要优化的地方
开发中需要用到bootstrapValidator的配置verbose:false,达到当前验证不通过不往下在验证的效果 问题: 当前字段需要remote验证时,此配置无效,原因在于remote是异步 ...
- 项目问题整理(it)
1,很(屎)优(一)雅(样)的IE9兼容问题: --webuploader在webkit浏览器中自动使用h5上传,但在IE中需要配置支持flash,特别注意两点: ①Upload.swf路径问题不正确 ...
- eclipse怎么关闭spring dashboard
进入help-install new software-what is already installed?-卸载spring board
- 腾讯云 python3+Django
!!!注意:如果已经包含了python3.5,跳过安装3.6版本. !!!本人安装完3.6后,pip3安装的包始终没法安装到3.6目录下,只能安装到3.5目录下 1,安装python3.6(用编译的方 ...
- Centos7Yum安装PHP7.2
1.安装源 安装php72w,是需要配置额外的yum源地址的,否则会报错不能找到相关软件包. php高版本的yum源地址,有两部分,其中一部分是epel-release,另外一部分来自webtatic ...
- firefox中outlook.com页面卡顿的原因
在火狐中使用outlook.com时,鼠标点击动作后,页面会卡顿一段时间,每次点击都是如此. 因为之前火狐出现由于硬件加速导致页面卡顿的情况,因此第一反应就是关闭硬件加速. 果然,关闭硬件加速后,页面 ...
- Jenkins使用SSH远程发布
远程发布需要安装Publish Over SSH插件 比如我们的应用服务器都是通过tomcat用户启动程序,因此,在jenkin服务器上配置免密登录远程服务器tomcat用户 //生成密钥对 ssh- ...
- 【枚举】【二分答案】【分块答案】【BFS】【最大流】【Dinic】bzoj1189 [HNOI2007]紧急疏散evacuate
[法一]枚举Time(0~N*M): S->'.'(1); 'D'->T(Time); '.'->'D'(dis(用BFS预处理,注意一旦到达'D',BFS就不能继续扩展了,注意di ...
- 【Treap】BZOJ1588-[HNOI2002]营业额统计
[题目大意][借用别人的概括]给出一个n个数的数列a,对于第i个元素ai定义fi=min(abs(ai-aj)),(1<=j<i),其中f1=a1.输出sum(fi) (1<=i&l ...