Secant line is a more common kind of design in the web page, such as zhihu’s more answers

Adaptive here means that the horizontal lines adapt to the number of text and the width of the parent

Secretly look at the implementation of Zhihu, it is obviously covered with a white background, add a little background to give away

I thought to myself: Is the front end of Zhihu not good? Maybe other people’s priorities aren’t on those

Here are a few better ways to do this, the ones that don’t give you away

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

Text-align: center; , and then given two pseudo-elements, respectively absolute positioning, then the pseudo-elements also follow the horizontal center, set enough width, and then the left side of the displacement of 100% to the left is ok, the parent remember beyond hiding.

The concrete implementation is as follows

HTML structure for

<div class="title">I'm the dividing line</div>
Copy the code

CSS styles for

.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;
}
Copy the code

CSS Delimiter (pseudo-element + Transform)

2. Pseudo-elements + Flex

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

The concrete implementation is as follows

HTML structure for

<div class="title">I'm the dividing line</div>
Copy the code

CSS styles for

.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;
}
Copy the code

CSS Separator Line (pseudo-element + Flex)

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

Text-align: center is also used to center the text and pseudo-elements, and then generate a box shadow or outline that is large enough. Since a single direction is not supported, clip-path or clip is used to cut it out

The concrete implementation is as follows

HTML structure for

<div class="title">I'm the dividing line</div>
Copy the code

CSS styles for

.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%);
}
Copy the code

CSS Separator Line (Pseudo-element +box-shadow/ Outline +clip-path)

4. Pseudo-element + Right :100%

This implementation requires an extra layer of labels, the outer is still text-align: center, and the inner text is absolutely positioned with two pseudo-elements, where the left is set 100% away from the right (relative to the text label)

The concrete implementation is as follows

HTML structure for

<div class="title">
    <span class="inner">I'm the dividing line</span>
</div>
Copy the code

CSS styles for

.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;
}
Copy the code

CSS separator line (pseudo-element + Right :100%)

5. border+transform

This idea does not need to use the dummy element, but it requires extra labels. Give the inner text a large enough 1px border, at which point you need to set line-height:1px. Since the inner text is whole and large enough (more than the parent level), you can use absolute positioning and Transform: translateX(-50%) center

The concrete implementation is as follows

HTML structure for

<div class="title">
    <span class="inner">I'm the dividing line</span>
</div>
Copy the code

CSS styles for

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

CSS Border +transform

6. Pseudo-element +border+left/right

This idea takes only one pseudo-element, generates a pseudo-element inside the text, and restores the position with a large enough border and the same negative value (absolute position +left/right)

The concrete implementation is as follows

HTML structure for

<div class="title">
    <span class="inner">I'm the dividing line</span>
</div>
Copy the code

CSS styles for

.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;
}
Copy the code

CSS delimiter (pseudo-element +border+left/right)

7. Pseudo-element +table-cell

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

The concrete implementation is as follows

HTML structure for

<div class="title">
    <span class="inner">I'm the dividing line</span>
</div>
Copy the code

CSS styles for

.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 done using a linear gradient, but you can also use other methods **/
    background-size: 100% 1px;
}
Copy the code

CSS Separator Line (Pseudo-element + Table-cell)

8.fieldset+legend

The combination of fieldSet and Legend tags can be used to create a natural line divider. Refer to Xinxu Zhang’s article

The concrete implementation is as follows

HTML structure for

<fieldset class="title">
    <legend class="inner">I'm the dividing line</legend>
</fieldset>
Copy the code

CSS styles for

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

CSS separator line (FieldSet + Legend)

summary

There are eight ways to create a line of separation, each of which has a different idea. The most important thing is to allow your imagination. This is probably what sets CSS apart from other languages

Here, the overall effect is as follows, you can visit here to view, you can choose the required way in the actual project

There may be other ways we haven’t thought of, so please put your ideas together and leave a comment below

The original link