CSS实现文本周围插入符号
CSS实现文本周围插入符号的方案
本文要讨论的是如何在文本的周围插入图标，怎么样控制它们之间的位置关系，通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点。
常见设计稿要求
- 在文本前、后、上、下插入图标、线条、三角形、圆形
- 插入的元素要和文本实现间距、对齐（居中、顶部、基线）等位置关系。
理伦知识
- 灵活使用display、background、z-index等属性
- 通过
:before和:after配合content属性来实现插入内容。 - 通过absolute、vertical、margin、padding、line-height等属性实现文本与符号位置关系。
- 能够使用CSS属性画出的图形则用CSS属性，否则用background属性显示背景图片
- 兼容性：content(IE8+)、伪元素（IE8+），因此如果要考虑兼容性的话，直接对元素设置background背景图片比 content插入元素更好。
实践操作
- 解法一：改变HTML结构，通过在文本元素前或后增加标签如
<span></span>和<i></i> - 解法二：直接对元素使用伪元素:before和:after（Ie7以下不支持）
- 必须有content属性
- 插入的元素的是内联元素，需要显示地定义为块级元素，才能设置高度，填充，边距等
- 解法三：将定制的符号作为背景加在父容器上，并通过内边距为符号留出所需空间。
线条
html
前端技术前端技术前端技术
css
.article-block-title {
height: 44px;
padding-left: 20px;
border-left: 3px solid #72b16a;
/实现文本与竖线对齐/
line-height: 44px;
}
分析
- 直接利用该文本的容器使用border-left、border-right、border-top、border-bottom可以分别实现只显示文本上、下、左、右的线条。
- 对于inline,inline-block等，可使用line-height实现文本与竖线的居中。
html
resto restaurant home page website template
css
.text-info .line {
display: inline-block;
width: 40px;
border-top: 1px solid #fff;
/使横线居中/
vertical-align: middle;
/for IE7/
*margin-top: 22px;
}
分析
- 在文本前后添加
i、span标签相对使用伪元素:before和:after更加清晰明了。 - vertical-align:middle实现线与文本垂直居中。
- 该属性在ie7中失效
- 可使用margin-top实现（前提知道parent-element高度）
三角形
html
css
.menu-tips:after {
position: absolute;
left: 0;
bottom: 0;
content: "";
width: 0;
height: 0;
/menu是156px宽，所以这里设置78px/
border-left: 78px solid transparent;
border-right: 78px solid transparent;
border-bottom: 10px solid #fff;
}
分析
- 通过transparent属性配合border实现三角形。
- 注意的是，我们可以使用position属性使:before和:after插入到任意位置，不仅仅是“前”或“后”。可以实现右图的线条位于文字“成为我们的志愿者”的正下边。
圆形
html
css
.index-panel-header .btn-group {
float: right;
/清除行内元素的4px空白间距/
font-size: 0;
}
.index-panel-header .btn {
display: inline-block;
margin-left: 11px;
width: 9px;
height: 9px;
background: #dedede;
/画圆/
-moz-border-radius: 5px; /* Firefox /
-webkit-border-radius: 5px; / Safari 和 Chrome /
border-radius:5px; / Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 /
/for ie7、8/
position: relative;
z-index:2;
behavior: url(../ie-css3.htc); / 通知IE浏览器调用脚本作用于'btn'类 */
}
分析
- 这里是banner轮播图等需求的做法，因为是连续的按钮，只要利用border-radius的属性画出圆形。
- border-radius在IE8以下无法使用，需要强制
- Trick1：用图片background替代
- Trick2：调用脚本 ie-css3.htc，使IE浏览器支持css3属性。
- 当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
- z-index值一定要比周围元素的要高
使用CSS Entities
html
css
.breadcrumb-list .list-item + .list-item:before {
padding-left: 4px;
padding-right: 4px;
color: #b3b3b3;
content: "/\00a0";
}
分析
- 其中的斜杠（/）符号，即使用
content: "/\00a0"生成，更多符号请看CSS Entities
自定义图标
html
css
.star-bar {
font-size: 0px;
}
.star {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
background: url("../images/index-star.png") no-repeat;
}
.nostar {
background-position: 0 -10px;
}
分析
- 这里是一些评分等需求的做法，利用background的属性显示图片。
顶部搜索栏
html
css
/法一加入indicator/
.header-nav .icon-search {
position: absolute;
top: 50%;
left: 17px;
z-index: 1;
display: inline-block;
width: 17px;
height: 17px;
margin-top: -8px;
background: url(../images/icon-search.png) no-repeat;
}
.header-nav .search-input {
position: relative;
display: inline-block;
width: 312px;
height: 28px;
margin-right: 20px;
/padding-left: 17px;加上搜索符占的位置/
padding-left: 40px;
border-radius: 20px;
/法二加入indicator，要在前面加上#fff,no-repeat等attribute/
background: #fff url(../images/icon-search.png) no-repeat 16px 50%;
}
分析
-
法一. 因为input无法应用伪元素（原因点这里），因此需要另外加上span子元素元素来显示（需要使用position:absolute，z-index父容器position:relative）(IE9+)
-
法二. 直接设置Input的背景background(更方便，而且直接在CSS添加)IE4+
不能直接对Input使用background，直接把Input背景覆盖掉了，需要在前面加上#fff背景颜色，后面加上no-repeat
扩展的知识
总结
- 如果是连续多个图标符号，则使用HTML标签表示。
- 如果是插入单个符号的话，在不考虑兼容性的情况下，使用伪元素 > 额外添加HTML标签。
- 对于状态类图标，则使用background-image。
浙公网安备 33010602011771号