CSS title line (strikethrough line effect) implementation

In fact, see this problem, the heart has silently put the code has been good ~, do not think the following:

Well, yes, we are really basically using this way, and there is no problem ~, a background color to set a bit on the Oraola.

However, there is a need to know more about a problem.

Come, see, this demand is like this, to achieve such a sub-effect (can be conceived to implement the code, to see the idea is not similar to it?) ）

You can see, this line behind the background map, as the screen size gradually widened, will cover the background map, when zoomed out, will not be covered in the background map, this can not use our usual fill background color of the wording, can only find another way (think of what good method to achieve it?). ）

So the problem is: because the screen contraction will cause the content area can be accommodated in a variety of content, resulting in a high degree of variation, each element is also with the screen when the high-end, the use of the background color can not be effective, what is the best solution?

Of course, you may say that this is a special case, you can direct, although this way can, but, there are many such blocks, is it all directly? Must not be able to lazy lazy, if you can find a way to be sure than direct, the results found that there is a problem to find the copy, to change the word on the egg.

Method

All right, we've got to find a way to solve the problem.

First from the float, the two lines floating on both sides, in fact, we can understand as a common three-column layout of the page, but the problem is, can not be fixed width ah, decided how to adapt it? So this pass

Since float is not, think of something else, this time use position Bar ~ The beginning of the usage is this, but there is a background color, this time we are not allowed to use the background color, see how to deal with this problem.

First, the basic structure:

Headling

We can use pseudo-class: Before, after to generate something insignificant, but in order to let people see clearly, directly with the label,

This is the improved structure:

Headling

Then give the style (the answer is in the inside OH):

. title {position:relative; z-index:2; font-size:16px; line-height:24px; text-align:center; color: #999; overflow:hi Dden; }.title. caption {position:relative; display:inline-block;}. Title. Caption line {position:absolute; top:11px; width:600px; height:1px; Background-color: #ddd;}. Title. Caption. line-l {right:100%; margin-right:15px;}. Title. Caption. line-r {left:100%; margin-left:15px;}

Have you seen the pattern above? Explain the details of this implementation:

• First, set the. Caption as the inline box, relative positioning

• Then, the positioning of the two lines is included in the. Caption, and then pushed to their respective places (left:100%, right:100%), you should know that the 100% is based on who? (yes, that's the first step. Caption, you should have guessed? ）

• Finally, we can meet our needs by using Margin-left/right to separate the gap.

We can set the width of the. Line to an extra-long, overflow-off, so that it can be self-adapting, with a small problem:

Use the above method to solve the problem of this line ~

