Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use CSS to achieve adaptive separator, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

N methods of realizing Adaptive Separator by CSS

Segmentation line is a common kind of design in web pages.

The adaptation here means that the horizontal lines on both sides will adapt to the number of text and the width of the parent.

Secretly take a look at the implementation of Zhihu, it is obvious that it is covered with a white background, plus a little background will be exposed.

I thought: the front end of Zhihu is not good either. Maybe other people's focus is not on this.

Here are a few better ways to implement it, the one that won't get out.

1. Pseudo element + transform:translateX (- 100%)

The main principle is to set the text center text-align: center;, and then give two pseudo elements, respectively absolute positioning, then the pseudo elements are also centered horizontally, set a sufficient width, and then shift the left one to the left by 100%, and the parent remembers to go beyond hiding.

The specific implementation is as follows

The html structure is

I am the dividing line.

The css style is

.title {position: relative; text-align: center; overflow: hidden; font-size: 14px; color: # 999;} .title:: before,.title::after {content:'; display: inline-block; width: 100%; height: 1px; position: absolute; background: # ccc; top: 50%;} .title: before {margin-left:-10px; transform: translateX (- 100%) } .title:: after {margin-left: 10px;}

See the Pen CSS separator (pseudo element + transform) by XboxYan (@ xboxyan) on CodePen.

two。 Pseudo element + flex

This is easier to understand, set display:flex, and then fill the remaining space with two pseudo elements.

The specific implementation is as follows

The html structure is

I am the dividing line.

The css style is

.title {display: flex; align-items: center; font-size: 14px; color: # 999;} .title:: before,.title::after {content:'; flex: 1; height: 1px; background: # ccc;} .title:: before {margin-right: 10px;} .title:: after {margin-left: 10px;}

See the Pen CSS separator (pseudo element + flex) by XboxYan (@ xboxyan) on CodePen.

3. Pseudo element + box-shadow/outline+clip-path

Also use text-align: center to center the text and pseudo elements, and then generate a large enough box-shadow or outline, which is cut out with clip-path or clip because it does not support a single direction

The specific implementation is as follows

The html structure is

I am the dividing line.

The css style is

.title {text-align: center; font-size: 14px; color: # 999; overflow: hidden;} .title:: before,.title::after {content:'; display: inline-block; width: 0; height: 1px; box-shadow: 000 9999px # ccc; vertical-align: middle;} .title:: before {margin-right: 10px Clip-path: polygon (00,-9999px 0,-9999px 100%, 0100%);} .title:: after {margin-left: 10px; clip-path: polygon (00, 9999px 0, 9999px 100%, 0100%);}

See the Pen CSS separator (pseudo element + box-shadow/outline+clip-path) by XboxYan (@ xboxyan) on CodePen.

4. Pseudo element + right:100%

This implementation requires an extra layer of tags, the outside is still text-align: center, and two pseudo elements are absolutely positioned in the internal text, where the setting on the left is 100% away from the right (relative to the text tag).

The specific implementation is as follows

The html structure is

I am the dividing line.

The css style is

.title {text-align: center; font-size: 14px; color: # 999; overflow: hidden;} .inner {position: relative;} .inner:: before,.inner::after {position: absolute; content:'; width: 9999px; height: 1px; background: # ccc; top: 50%;} .inner:: before {right: 100%; margin-right: 10px } .inner:: after {margin-left: 10px;}

See the Pen CSS separator (pseudo element + right:100%) by XboxYan (@ xboxyan) on CodePen.

5. Border+transform

This idea does not need pseudo elements, but requires additional tags to give the internal text a large enough 1px border. At this time, you need to set line-height:1px. Because the interior is overall and large enough (more than the parent), you can use absolute positioning and transform: translateX (- 50%) to center.

The specific implementation is as follows

The html structure is

I am the dividing line.

The css style is

Title {position: relative; text-align: center; font-size: 14px; color: # 999; overflow: hidden; padding: .6em 0Actubable * hold the height up * * /} .inner {position: absolute; left: 50%; transform: translateX (- 50%); white-space: nowrap; line-height: 1px; border-left: 9999px solid # ccc; border-right: 9999px solid # ccc Padding: 0 10px;}

See the Pen CSS Separator (border+transform) by XboxYan (@ xboxyan) on CodePen.

6. Pseudo element + border+left/right

This idea only needs a pseudo element, generates a pseudo element inside the text, and restores the position using a large enough border and the same negative value (absolute positioning + left/right).

The specific implementation is as follows

The html structure is

I am the dividing line.

The css style is

.title {text-align: center; font-size: 14px; color: # 999; overflow: hidden;} .inner {position: relative; padding: 0 10px;} .inner:: before {content:'; position: absolute; height: 1px; top: 50%; border-left: 9999px solid # ccc; border-right: 9999px solid # ccc; right:-9999px; left:-9999px;}

See the Pen CSS separator (pseudo element + border+left/right) by XboxYan (@ xboxyan) on CodePen.

7. Pseudo element + table-cell

The main idea is to set display:table for the parent, set display:table-cell for pseudo elements, and set a large enough width.

The specific implementation is as follows

The html structure is

I am the dividing line.

The css style is

.title {display: table; font-size: 14px; color: # 999;} .inner {display: table-cell; white-space: nowrap; padding: 0 10px;} .title:: before,.title::after {content:'; display: table-cell; width: 9999px; overflow: hidden; background: linear-gradient (# ccc 0MJC) center no-repeat / * * it is generated by linear gradient here, but it can also be generated in other ways * * / background-size: 100% 1px;}

See the Pen CSS separator (pseudo element + table-cell) by XboxYan (@ xboxyan) on CodePen.

8.fieldset+legend

Using the combination of fieldset and legend tags, you can naturally achieve the separator effect. Refer to Zhang Xinxu's article.

The specific implementation is as follows

The html structure is

I am the dividing line.

The css style is

.title {font-size: 14px; color: # 999; border: 0; border-top: 1px solid # ccc; padding: 0;} .inner {margin: 0 auto;; padding: 0 10px;}

See the Pen CSS Separator (fieldset+legend) by XboxYan (@ xboxyan) on CodePen.

The above is all the content of the article "how to use CSS to implement adaptive separator lines". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.