本文要討論的是如何在文本的周圍插入圖標，怎么樣控制它們之間的位置關系，通過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插入到任意位置，不僅僅是“前”或“后”?？梢詫崿F右圖的線條位于文字“成為我們的志愿者”的正下邊。
圓形
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教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。