项目中总是能遇到奇怪的需求,比如今天就遇到了需要在某个弹窗标题元素前面插入一个图标。但是最好不要引入图片。
1.标题元素前面插入一个图标
原来的弹窗
新弹窗
实现代码
主要目的就是在title前面通过伪类:before插入一个css样式元素。
- 使用
border-radius: 50%;
绘制圆形。 - 使用
before {content: "?";}
添加伪元素。
body .ui-dialog .ui-dialog-titlebar .ui-dialog-title:before {
content: "?";
display: inline-block;
padding-left: 7px;
width: 22px;
height: 22px;
opacity: 1;
background: #ff772a;
color: #fff;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
margin-right: 2%;
}
注意: 需要给content设置display: inline-block;
使他们一行显示。并且刚开始问好“?”并没有居中显示,需要设置padding-left: 7px;
2. 标题前面添加横向梯形
.legend::before {
content: " ";
display: inline-block;
padding-left: 7px;
width: 0;
height: 3rem;
opacity: 1;
border-top: 5px solid transparent;
border-left: 4px solid #30FFC7;
border-bottom: 5px solid transparent;
position: relative;
top: 0.7rem;
}
好咯,本文结束,谢谢观看。