CSS pseudo element before and after production fashion focus picture frame

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

In CSS tags have such a label div:before, Div:after, for before, after the part of the 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:

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, there must be his magical place, today to take a look at the use of before and after the creation of a creative fashion focus picture frame, the later production of this border line when we can completely discard the image of the practice, And it's very beautifully made.

Production ideas and methods:

1, in the picture layer add more than one layer of Div, 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 before pseudo elements, using CSS style positioning, set a 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 continue to pray line two border lines, the same method, 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, the border line adjusted to dashed.

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

HTML code:

<div class= "Content" >
<ul>
  <li><a href= "http://www.jiawin.com" target= "_blank" >  <p class=
  " Focus "></p></a></li>
  <li><a href=" http://www.jiawin.com "target=" _blank ">  <p class=
  " Focus "></p></a></li>
  <li><a href=" http://www.jiawin.com "target=" _blank ">  <p class=
  " Focus "></p></a></li>
  <li id=" Noborder "><a href=" http://www.jiawin.com "target=" _blank ">
  <p class= "Focus" ></p></a></li>
</ul>
</div>

CSS style code

. 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 : 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.