利用CSS实现在文本的周围插入内容

本文要讨论的是如何在文本的周围插入图标，怎么样控制它们之间的位置关系，通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点。

在文本前、后、上、下插入图标、线条、三角形、圆形

插入的元素要和文本实现间距、对齐（居中、顶部、基线）等位置关系。

灵活使用display、background等属性

通过:before和:after配合content属性来实现插入内容。

通过absolute、vertical、margin、line-height等属性实现文本与符号位置关系。

能够使用CSS属性画出的图形则用CSS属性，否则用background属性显示背景图片

解法一：改变HTML结构，通过在文本元素前或后增加标签如 span /span 和 i /i

解法二：直接使用伪元素:before和:after（Ie7以下不支持）

必须有content属性

插入的元素的是内联元素，需要显示地定义为块级元素，才能设置高度，填充，边距等

 div >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
 p >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
 div >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
 div >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
 div >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标签。
以上就是利用CSS实现在文本的周围插入内容的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。