CSS实现文本周围插入内容的方案
本文要讨论的是如何在文本的周围插入图标，怎么样控制它们之间的位置关系，通过html结构合理性与css属性的使用来比较不同方案所实现效果的优缺点。
常见设计稿要求
在文本前、后、上、下插入图标、线条、三角形、圆形
插入的元素要和文本实现间距、对齐（居中、顶部、基线）等位置关系。
理伦知识
灵活使用display、background等属性
-
通过
:before和:after配合content属性来实现插入内容。立即学习“前端免费学习笔记（深入）”；
通过absolute、vertical、margin、line-height等属性实现文本与符号位置关系。
能够使用CSS属性画出的图形则用CSS属性，否则用background属性显示背景图片
实践操作
解法一：改变HTML结构，通过在文本元素前或后增加标签如
和解法二：直接使用伪元素:before和:after（Ie7以下不支持）
必须有content属性
插入的元素的是内联元素，需要显示地定义为块级元素，才能设置高度，填充，边距等
线条
html
前端技术前端技术前端技术
css
.article-block-title {
height: 44px;
/*实现文本与竖线对齐*/
line-height: 44px;
border-left: 3px solid #72b16a;
padding-left: 20px;
}分析
直接利用该文本的容器使用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值一定要比周围元素的要高
自定义图标
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标签表示。
如果是插入单个符号的话，在不考虑兼容性的情况下，使用伪元素 > 额外添加HTML标签。
