Have you ever encountered the need to underline text? I have encountered such demands in the projects I have participated in, and I have summarized them into two types:

First, the background of the text is a solid color, a single color;

All roads lead to Rome, and given enough time to sit quietly in your air-conditioned room, you’ll find your own solution.

First look at the first, the implementation of a solid background color scheme.

One way to do this is to write the line with an empty label. Of course, you can also use the background image, cut a transparent in the middle, white bars on both sides of the image. You can also use pseudo-elements. Before after.

I used the pseudo-element method when the background was a picture. I feel that the pseudo-element is really too powerful.

No nonsense on the code:

HTML:

<div class="onpure_bg">
    <h2 class="onpure">
        <span class="onpure_title"</span> </h2> <span class="line"></span>

</div>
Copy the code

CSS:

/* onpure_bg{background:#ccc;width: 700px; height: 400px; margin:0 auto; background-size: cover; position: relative; } .onpure{ position: absolute; top: 70px; left:50%; width: 150px; margin-left: -75px; margin-top: 50px; Z-index: 1}. Onpure_title {/* Key: set the same color as the background color. */ background:#ccc;
    padding:0px 20px; 
}
.line{
    display: inline-block;
    width: 500px;
    height: 0px;
    border: 2px solid #fff;
    position: absolute;
    top:130px;
    left: 50%;
    margin-left: -250px;
}

Copy the code

Code parsing:

Use z-index to place the text level above the line. Use the same background color for the title as the background color. Padding sets the left and right values to split the gap.

It is so easy!

Take a look at the background as a picture of the implementation method, it is obvious that the above method took a clever, using the background color can not see the difference. With an image with a complex background pattern, this method fails and we use pseudo-elements.

code

HTML

<div class="onimg_bg">
    <h2 class="onimg">
        <span class="onimg_title"</span> </h2> </div>Copy the code

CSS

*/. Onimg_bg {background: none no-repeat; width: 700px; height: 400px; margin:0 auto; background-size: cover; position: relative; margin-bottom: 20px; } .onimg{ position: absolute; top: 70px; left:50%; width: 600px; margin-left: -300px; text-align: center; } /* Pseudo-element implementation */.onimg_title:before{display: inline-block; position: relative; top:-7px; right: 20px; content:"";
    width: 200px;
    height: 0px;
    border: 2px solid #fff;
}
.onimg_title:after{
    display: inline-block;
    position: relative;
    top:-7px;
    left: 20px;
    content: "";
    width: 200px;
    color: #fff;
    height: 0px;
    border: 2px solid #fff;
}

Copy the code

The method of pseudo element is also very simple, but when I first encountered it, I struggled for a while. Sometimes it was a problem of thinking. When I thought of this method, the problem was solved easily.

Code parsing:

Please note that using the content property of the fake element is essential. Then you can level the fake element block and set the style as you would a normal element. In this case, set a bar with no height and a width of 200px.

You can also set the background image to BACKGROUND: None no-repeat instead of border

In view of this demand, only pseudo-element implementation is thought of at present, if you have a better method, welcome to leave a message.