當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS实现文本周围插入符号

發布時間：2023/12/2 CSS 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

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

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值一定要比周圍元素的要高

使用CSS Entities

html

css

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

分析

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

自定義圖標

html

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

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实现文本周围插入符号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： DIV CSS布局-固定页面开度布局
下一篇： height百分比以及高度自适应问题