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

扩展的知识

• 如何居中元素
• 网页中插入图像

总结

• 如果是连续多个图标符号，则使用HTML标签表示。
• 如果是插入单个符号的话，在不考虑兼容性的情况下，使用伪元素 > 额外添加HTML标签。
• 对于状态类图标，则使用background-image。

参考资料

• 学习使用：before和：after伪元素
• The Shapes of CSS
• css3画圆、css3画半圆、css3画空心圆和css3画四分之一圆
• 让IE6/IE7/IE8浏览器支持CSS3属性