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属性

CSS实现文本周围插入符号相关推荐

在线文本中插入符号工具
在线文本中插入符号工具在线文本中插入符号工具工具能够在文本中任意两个字符之间都插入指定的符号,非常简单就可以完成绚丽个性的文本段落. https://tooltt.com/txt-symbol/
在latex文本中插入特殊符号
大家需要注意一点在文本中插入特殊符号和在公式中插入是不一样的在文本中需要两侧加入$ \Omega $ 如果单纯的\Omega 是显示不出来的.
Excel文本间隔插入固定符号的操作
在实际工作中我们可能会遇到下图的问题,需要将编号中间的4个数字也就是日期给分列提取出来,或者我们希望编号格式更加好看,想以代码-日期-序号的形式显示,那如何操作请看下图演示 01.选中需要间隔插入字符 ...
Word控件Spire.Doc 【文本】教程(4) ；C#如何在Word中插入符号
有时我们需要在段落中插入符号或特殊字符.文章介绍了用c#代码在Word中插入符号的解决方案.在名为 Spire.Doc的Word .NET API的帮助下,我们将使用 Ä 和 Ë 作为符号示例来完成该 ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
计算机上的符号并不代表分数,如何在Excel里轻松插入符号、分数和特殊字符
如何在Excel里轻松插入符号.分数和特殊字符发布时间:2011-11-14 09:59:25 作者:佚名我要评论 Excel中使用"符号"对话框可以插入键盘上没有的符 ...
html文本框怎么写表情,js文本框插入表情支持解析代码
特效描述:js文本框插入表情支持解析代码.js文本框点击选择插入表情,支持代码解析输出. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 easyEditor @某某获取内容Ht ...
java使用Apache poi根据word模板生成word报表(增加插入符号、控制分页功能)
原文链接:https://blog.csdn.net/u012775558/article/details/79678701 根据原代码新增了插入符号和控制分页功能.改了类名,一些方法,新增一个符号类 ...
word中如何插入符号_如何在Word中插入版权或商标符号
word中如何插入符号 You can easily insert hundreds of symbols into your Word document with a few nimble key ...

CSS实现文本周围插入符号

CSS实现文本周围插入符号的方案

常见设计稿要求

理伦知识

实践操作

线条

html

css

分析

html

css

分析

三角形

html

css

分析

圆形

html

css

分析

使用CSS Entities

html

css

分析

自定义图标

html

css

分析

顶部搜索栏

html

css

分析

扩展的知识

总结

参考资料

CSS实现文本周围插入符号相关推荐

最新文章

热门文章