CSS solution for inserting content around text

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.

Common design draft requirements

Inserticons, 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.

ethical knowledge

Flexibly use display, background and other attributes
Pass:beforeand:aftercooperate 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

Practical operation

Solution 1: Change the HTML structure by adding tags before or after text elements such asand< /i>

Solution 2: Directly use pseudo-elements: before and :after (not supported below Ie7)

Must have content attribute

The inserted element is aninline element, which needs to be explicitly defined as ablock-level elementbefore the height can be set , padding, margins, etc

Line

##html

前端技术前端技术前端技术

Copy after login

css

.article-block-title { height: 44px; /*实现文本与竖线对齐*/ line-height: 44px; border-left: 3px solid #72b16a; padding-left: 20px; }

Copy after login

Analysis

Directly use the container of the text to use border-left, border-right, border-top, and border-bottom to display only the text. Lines up, down, left, and right.

For inline, inline-block, etc., you can use line-height to center the text and vertical lines.

##html

resto restaurant home page website template

Copy after login

css

.text-info .line { display: inline-block; width: 40px; border-top: 1px solid #fff; /*使横线居中*/ vertical-align: middle; /*for IE7*/ *margin-top: 22px; }

Copy after login

Analysis

Adding
i
andspantags before and after the text is clearer than using pseudo-elements: before and :after.
vertical-align:middle achieves vertical centering of lines and text.

This attribute is invalid in ie7
can be implemented using margin-top (prerequisite is to know the parent-element height

html

The menu

Copy after login

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; }

Copy after login

Analysis

Passed The transparent attribute works with the border to implement the triangle.
Note that we can use the position attribute to insert :before and :after at any position, not just "before" or "after". The line on the right can be placed directly below the text "Become our volunteer"
##circle

##html

Copy after login

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'类 */ }

Copy after login

Analysis

Here is how to do the banner carousel diagram and other requirements, because it is a continuous button, as long as the border-radius is used The attribute draws a circle.

border-radius cannot be used below IE8 and needs to be forced

##Trick1: Replace with image background.

##Trick2: Call the script ie-css3.htc to make IE browser support css3 attributes

##The current element. There must be positioning attributes, such as position:relative or position:absolute attributes.

The z-index value must be higher than the surrounding elements

##.
#Custom icon

##html

Copy after login

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; }

Copy after login

Analysis

Here are some methods for scoring and other requirements, using the background attribute to display pictures

##Extended knowledge

About how to center. Element, here is a cheat tool: How to center an element
Summary

If there are multiple icon symbols in a row, use HTML tags to represent them.
If you are inserting a single symbol, use pseudo-element > to add additional HTML tags without considering compatibility.

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!