Home > Article > Web Front-end > Insert content around text using CSS
This article will discuss how to insert icons around text, how to control the positional relationship between them, through the rationality of HTML structure and the use of CSS attributes To compare the advantages and disadvantages of the effects achieved by different solutions.
Insert icons, lines, triangles, circles before, after, above and below the text
The inserted elements must achieve spacing, alignment (center, top, baseline) and other positional relationships with the text.
Flexibly use display, background and other attributes
Pass :before
and :after
cooperate with the content attribute to insert content.
Realize the positional relationship between text and symbols through absolute, vertical, margin, line-height and other attributes.
Graphics that can be drawn using CSS properties use CSS properties, otherwise use the background property to display the background image
Solution 1: Change the HTML structure by adding tags before or after text elements such as <span></span>
and <i>< /i>
Solution 2: Directly use pseudo-elements: before and :after (not supported below Ie7)
Must have content attribute
The inserted element is an inline element, which needs to be explicitly defined as a block-level element before the height can be set , padding, margins, etc
<div class="article-block-title"> <h2 class="title"> <span>前端技术</span><i>前端技术前端技术</i> </h2> </div>
.article-block-title { height: 44px; /*实现文本与竖线对齐*/ line-height: 44px; border-left: 3px solid #72b16a; padding-left: 20px; }
##html
<p class="text-info"> <i class="line line-left"></i>resto restaurant home page website template<i class="line line-right"></i> </p>
.text-info .line { display: inline-block; width: 40px; border-top: 1px solid #fff; /*使横线居中*/ vertical-align: middle; /*for IE7*/ *margin-top: 22px; }
and span
tags before and after the text is clearer than using pseudo-elements: before and :after.
<div class="menu-tips">The menu</div>
.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; }
<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'类 */ }
border-radius cannot be used below IE8 and needs to be forced
##Trick1: Replace with image background.
<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>
.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; }
The above is the detailed content of Insert content around text using CSS. For more information, please follow other related articles on the PHP Chinese website!