CSS pseudo element before, after magical: the production of fashion focus picture frame

In the CSS selector has such a way of writing Div:before, Div:after, for before, after that some people are quite unfamiliar, then these two tags is what? What's the use?

: befor,: After is the pseudo element of CSS , what is pseudo element? Pseudo elements are used to set special effects on certain selectors.

We can use the CSS manual to query its basic usage:

• E:before/e::before the content that occurs before the object (based on the logical structure of the object tree). Used in conjunction with the Content property
• E:after/e::after the content that occurs after the object (based on the logical structure of the object tree). Used in conjunction with the Content property
• IE6-7 does not support

Since talking about the before, after, then we also have to approximate the content,content used and: After and: Before pseudo elements together, before or after the object display content. The basic usage is as follows:

1	Div:after{content: "arbitrary string";}

Now that we know the approximate usage of before and after, we can insert new content before or after the content of the element. We can also use CSS style to control and beautify the inserted content. Maybe in the usual way the label is not very useful, but existence is the truth, haha, must have his magical work, today to take a look at the use of before and after the production of a fashion focus picture frame, after the production of this border line when we can completely discard the image of the practice, and make it very exquisite. Don't believe, please see the effect demo bar first:

View Preview

Production ideas and methods:

1. Add one more layer of div to the picture layer, set 1-pixel border lines, border lines have up and down four borders, and we want only each of the two border lines of the shape of a small triangle, then we just have to remove the middle part of four border lines, that does not achieve our effect. So how do we get rid of the middle part of the four-line border? Or use something to cover him up and not let him show it? The solution is that we know that before and after artifacts can add new content before or after the element, so we use these two pseudo elements to cover the middle part of the four border lines.
2. We first remove the left and right sides of the border line, in the border layer, using the before pseudo elements, using CSS style positioning, set the white border, why the white border? Because you want to cover the middle of the previous left and right border, the color setting sing Woo the background (this example has a white background) consistent, which looks like the middle part is trimmed off.
3. We'll keep praying. Two border lines, methods above, using after pseudo elements, using CSS style positioning, set to a white border, masking the middle part of the top and bottom border lines. In this way, the basic shape will appear
4. Beautify the steps, adjust our details, and adjust the border lines to dashed lines.

Understand the basic ideas and methods, is not very simple? So let's start writing code.

HTML code:

1 2 3 4 5 6 7 8 9 ten -one 12

<div> <ul> <li><a href=" Http://ww W.jiawin.com "target=" _blank "> <p></p></a></li> <li><a href= "http://www.jiawin.com" target= "_ Blank "> <p></p> </a></li> <li><a href= "http://www.jiawin.com" target= "_blank" > <p></p></a></li> <li Id= "Noborder" ><a href= "http://www.jiawin.com" target= "_blank > <p></p></a></li> </ul> </ Div>

CSS style code

1 2 3 4 5 6 7

. content {width:788px; Margin:auto; Height:auto; Overflow:hidden; padding:30px; Content ul Li {float:left; height:176px; border-right:1px solid #DDDDDD; position:relative; padding:10px;} . focus {Background:rgba (250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; Position:absolute; left:10px; top:10px; Display:none;} . focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; Content: ""; Position:absolute; left:-1px; top:20px;} . focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; Content: ""; Position:absolute; top:-1px; left:20px;} Content ul Li:hover. Focus {Display:block} #noborder {border-right:0 none;}

Through this example is not very convenient to make this effect? And look at our code, is not very concise it! Ha ha...... Maybe there's a better way to do it, and we can discuss it together. I personally feel that div+css is a very good and easy to hand but highly functional technology, and he is fun and fun. Using your fantastic ideas, you can make all kinds of unexpected effects. Look forward to your work oh.

View Preview

Source: Sense only front end CSS pseudo element before, after magical magic: the production of fashion focus picture frame