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

<div class="article-block-title"><h2 class="title"><span>前端技术</span><i>前端技术前端技术</i></h2>
</div>

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

<p class="text-info"><i class="line line-left"></i>resto restaurant home page website template<i class="line line-right"></i>
</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 class="menu-tips">The menu</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 class="btn-group"><a href="" class="btn"></a><a href="" class="btn active"></a><a href="" class="btn"></a><a href="" class="btn"></a>
</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属性。
  1. 当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
  2. z-index值一定要比周围元素的要高

使用CSS Entities

html

<ul class="breadcrumb-list clearfix"><li class="list-item"><a href="" class="item-txt-link">C站</a></li><li class="list-item"><a href="" class="item-txt-link">个人报表</a></li><li class="list-item"><a href="" class="item-txt-link">文件一</a></li><li class="list-item"><a href="" class="item-txt-link">文档一</a></li>
</ul>

css

.breadcrumb-list .list-item   .list-item:before {padding-left: 4px;padding-right: 4px;color: #b3b3b3;content: "/\00a0";
}

分析

其中的斜杠（/）符号，即使用
```
content: "/\00a0"
```
生成，更多符号请看CSS Entities

自定义图标

html

<div class="star-bar"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star nostar"></span>
</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

    <ul class="header-nav"><li class="item"><!--<span class="icon-search"></span>--><form action=""><input class="search-input" type="text"></form></li><li class="item"><a class="user-login" href="">登录</a></li></ul>

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