CSS example code for implementing sliding doors

The so-called sliding door technology means that the box background can automatically stretch to accommodate texts of different lengths. That is, when the text increases, the background will also appear longer.

Most of them are used in navigation bars, such as WeChat navigation bar:

The specific implementation method is as follows:

1. First, each piece of text content is composed of a tag and span tag

<a href="#">
        <span></span>
    </a>

2. The a tag only specifies the height but not the width.

3. After setting the background image in the a tag, specify a padding-left value, the same size as the left semicircle (this ensures that the left background remains unchanged and the middle background can be stretched).

4. The span tag also specifies the background image, without specifying the width, and specifies the padding-right value to display the right half of the image (this is if the image position is set to the right)

The specific code is as follows:

a {
            color: white;
            line-height: 33px;
            margin: 100px;
            display: inline-block;
            text-decoration: none;
            /* a cannot give width*/
            /* */
            height: 33px;
            background: url(Images/vx.png) no-repeat;
            padding-left: 15px;
        }
        
        a span {
            display: inline-block;
            height: 33px;
            background: url(Images/vx.png) no-repeat right;
            padding-right: 15px;
        }

The background of span should be specified as right

 <a href="#">
        <span>一</span>
    </a>
    <a href="#">
        <span>One sentence</span>
    </a>
    <a href="#">
        <span>One sentence</span>
    </a>
    <a href="#">
        <span>A long sentence</span>
    </a>
    <a href="#">
        <span>A super super super super super long sentence</span>
    </a>

The results are shown as

It can be found that as the length of the text in the span tag changes, the background image will stretch.

Summarize

The above is the example code of how to implement sliding doors with CSS that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!