N ways to cleverly implement adaptive dividers with CSS

Dividing lines are a common type of design on web pages. For example, more answers on Zhihu

The adaptiveness here means that the horizontal lines on both sides will adapt to the number of characters and the width of the parent

I secretly took a look at Zhihu's implementation. It is obviously covered with a white background. Adding a little background will reveal the secret.

I thought: Zhihu’s front-end is not that good? Maybe other people's focus is not on these.

Here are a few better ways to implement it, the kind that won’t be exposed

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

The main principle is to set the text to the center text-align: center;, and then give two pseudo-elements, each of which is absolutely positioned. At this time, the pseudo-elements are also horizontally centered. Set a sufficient width, and then shift the left one 100% to the left. Remember to hide the parent if it exceeds the limit.

The specific implementation is as follows

The html structure is

<div class="title">I am the dividing line</div>

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

CSS separator line (pseudo element + transform)

2. Pseudo-elements + flex

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

The specific implementation is as follows

The html structure is

<div class="title">I am the dividing line</div>

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

CSS separator line (pseudo element + flex)

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

Also use text-align: center to center the text and pseudo-element, and then generate a sufficiently large box-shadow or outline. Since it does not support a single direction, it is cropped with clip-path or clip.

The specific implementation is as follows

The html structure is

<div class="title">I am the dividing line</div>

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: 0 0 0 9999px #ccc;
    vertical-align: middle;
}
.title::before{
    margin-right: 10px;
    clip-path: polygon(0 0, -9999px 0, -9999px 100%, 0 100%);
}
.title::after{
    margin-left: 10px;
    clip-path: polygon(0 0, 9999px 0, 9999px 100%, 0 100%);
}

CSS separator line (pseudo element + box-shadow/outline + clip-path)

4. Pseudo element + right: 100%

This implementation requires an extra layer of tags. The outer part is still text-align: center. Add two pseudo-elements to the inner text with absolute positioning. The left one is set to 100% of the right one (relative to the text tag).

The specific implementation is as follows

The html structure is

<div class="title">
    <span class="inner">I am the dividing line</span>
</div>

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

CSS separator line (pseudo element + right: 100%)

5. border+transform

This idea does not require pseudo-elements, but it does require additional tags to give the internal text a 1px border on the left and right. At this time, you need to set line-height: 1px. Since the internal text is large enough (larger than the parent), you can use absolute positioning and transform: translateX(-50%) to center it.

The specific implementation is as follows

The html structure is

<div class="title">
    <span class="inner">I am the dividing line</span>
</div>

The css style is

.title{
    position: relative;
    text-align: center;
    font-size: 14px;
    color: #999;
    overflow: hidden;
    padding: .6em 0;/**Increase the height**/
}
.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;
}

CSS separator line (border+transform)

6. Pseudo-element + border + left/right

This idea only requires a pseudo-element, which is generated inside the text, and the position is restored using a sufficiently large border and the same negative value (absolute positioning + left/right)

The specific implementation is as follows

The html structure is

<div class="title">
    <span class="inner">I am the dividing line</span>
</div>

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

CSS separator line (pseudo element + border + left/right)

7. Pseudo-element + table-cell

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

The specific implementation is as follows

The html structure is

<div class="title">
    <span class="inner">I am the dividing line</span>
</div>

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 0,#ccc) center no-repeat;/**This is generated using linear gradient, other methods can also be used**/
    background-size: 100% 1px;
}

CSS separator line (pseudo element + table-cell)

8.fieldset+legend

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

The specific implementation is as follows

The html structure is

<fieldset class="title">
    <legend class="inner">I am the dividing line</legend>
</fieldset>

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

CSS separator (fieldset+legend)

summary

There are 8 ways to achieve the effect of the separator line listed above. Each method has different ideas. The important thing is that you can use your imagination. Maybe this is what makes CSS different from other languages.

I have sorted it out here. The overall effect is as follows. You can visit here to view it. You can choose the method you need in the actual project.

Summarize

The above are the N methods that I introduced to you to cleverly implement adaptive dividers with CSS. 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!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!