Insert content around text using CSS

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

• 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.

ethical knowledge

• 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

Practical operation

• 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

Line

##html

<div class="article-block-title">
    <h2 class="title">
        <span>前端技术</span><i>前端技术前端技术</i>
    </h2>
</div>

css

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

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

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

Analysis

Adding
• i

  and span tags 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

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

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

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

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

1. ##.
   #Custom icon

2. ##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;
}

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!