CSS: Before and After achieve adaptive width rounded border effect

1. Objectives

The personal information display bar after a logon shows the final effect:

2. Analysis

The display bar features that the user's user name and points may occupy different widths, which leads to different border widths. The border color is gradient, and the upper and lower sides are pale. Therefore, you can only use the cut graph method at this stage. How can this be achieved? There are many methods. Considering that it is more reliable to use CSS to adjust the background-position by splitting the left, right, and middle tiles of the border to form a 4*75 PNG image, it can achieve automatic tile and meet the requirements of the left and right corner. The cut chart is as follows:

3. html Structure

As there are several hyperlinks that are displayed side by side, use the combination of UL Li. Of course, use the label in Li.

4. CSS implementation

Because the attributes of the before and after pseudo elements are not particularly known, at first I added before and after to the UL tag, and UL, UL: before, UL: after, the left float is used, UL width is set to 100%, UL: before, UL: After is used with the width of 4px. Take it for granted, should this be successful? But it does not actually work. As shown in, we can see that there is an unexpected background on both sides of the rounded corner.

After thinking about it, it turns out that UL: before, UL: After will only appear inside ul, even if the display is set to block, it cannot make these two pseudo elements jump out of the UL box and become the elements outside it. In the CSS tutorial, the two pseudo elements are described as follows:

W3school:By default, this pseudo element is a row element, but you can use the property display to change this.

However, this description does not indicate that the fact that such a display change cannot be changed is that its parent element is still the appended element. "The last word on the paper is simple, and you know that this is the case.

So the correction method came out, and adding the pseudo class to Ul would not work. Isn't it OK to add the pseudo class to UL's parent node?

After the test, the final effect was achieved. It's so excited.

This article comes fromPinocchioatbeijing(Focus on front-end technologies to pursue the best life in the United States) blog in the blog Park,ArticleURL: Success.