: Before and: After pseudo-class elements to create magical effects

Article Introduction: the beauty of pseudo-class elements.

By using: Before and: After, you can create amazing visual effects. For each element of the page, you have two additional elements that you can control, which are needed for additional elements to implement. They bring more interesting space to the design, rather than adding semantically negative effects to the label. Here are a bunch of amazing things. Let's get started!

Give you a multilayer background canvas

Because you can absolutely position pseudo elements relative to their parent elements, you can imagine them as two extra layers of each element. Nicolas Gallagher shows us has shown many of these applications, including multiple layers of borders, combined with CSS3 backgrounds and equal-height columns.

Extend the possibility of expressing more graphics through a single element

All of the above graphics any many can be created by a single element, which is a realistic approach. And "make a coffee cup with pure css!" This kind of case is the opposite (using a div of 1700), this method is more practical.
Here's what this code can do to give us the example of a hexagonal star:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

#star-six {         width: 0;         height: 0;         border-left: 50px solid transparent;         border-right: 50px solid transparent;         border-bottom: 100px solid red;         position: relative; } #star-six:after {         width: 0;         height: 0;         border-left: 50px solid transparent;         border-right: 50px solid transparent;         border-top: 100px solid red;         position: absolute;         content: "";         top: 30px;         left: -50px; }

Print link address for linked text

1 2 3 4 5

@media print {   a[href]:after {     content: " (" attr(href) ") ";   } }

Clear floating

We can use pseudo-class elements to do this for us, as compared to the addition of the no semantic tag to clear the container float. Is the familiar "Clearfix", and another more semantically named class name "group".

1 2 3 4 5 6 7 8 9 10 11

.group:before, .group:after {     content:"";     display:table; } .group:after {     clear:both; } .group {     zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

Simulate Center float

A floating property does not actually contain a centered value unless we want to have this property ourselves. Although the float has the left and right attributes, but through the placeholder pseudo class element We can carve out a region in the middle of two column layout to put a picture, we can simulate this effect simulate the effect.

Indicates which language the code in the block is using

The site that you are using now uses a pseudo-class element to indicate the code block in which language she is using.

1	<pre rel="CSS"></pre>

1 2 3 4 5 6

pre:after {   content: attr(rel);   position: absolute;   top: 22px;   right: 12px; }

Create a series of icons

Nicolas Gallagher again, by not using the picture, expanded the idea above to create another level of a massive set of iconsIcon, up to only two pseudo class elements.

More efficient use of space

CSS to bring, CSS can also be taken away. This means that the pseudo-class element content can be queried via media applied or removed conditionally via media queries. Perhaps you can use icon in ample space, and use more descriptive text when space is plentiful.

Use more decorative typography

If your pseudo class elements are text, they will inherit the layout style of their parent elements. But when you set up content, you can also use styles for them. In other words, you can use different fonts and colors to make your title more decorative.

1 2 3 4 5 6 7 8 9 10 11 12 13-14

h2 {      text-align: center; } h2:before, h2:after {     font-family: "Some cool font with glyphs", serif;     content: "\00d7";  /* Some fancy character */     color: #c83f3f; } h2:before {     margin-right: 10px; } h2:after {     margin-left: 10px; }

Create a browser width bar

When you need an element, its content is very small, but you need its background to fill the entire width, and you usually use a method of appending an inner containing container without semantics, or using a space definition that can be repeated. Or you can extend his pseudo-class elements to the edge by using an element. simulate the effect

Add a border to the body label

To add a regular border around the page and use the pseudo class elements in a fixed position to define the bar at the head and top, we can use the "body border" effect without the need for additional labels.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17-18

body:before, body:after {     content: "";     position: fixed;     background: #900;     left: 0;     right: 0;     height: 10px; } body:before {     top: 0; } body:after {     bottom: 0; } body {     border-left: 10px solid #900;     border-right: 10px solid #900; }

Make a button that has a glow

If you use block artifacts and have them transparent to white and place them outside the button (hidden by overflow), when the mouse is hovering, you'll find the button has a light sense by using the animation effect. This effect can be used in Firefox4 or FIREFOX5, because this is the only browser currently allowed to animate pseudo-class elements.

Anton Trollbäck made the original version of Nicolas Gallagher of the pseudo-class element optimization version ; Another version of me

Page fades when special chain contact is made

If you do not set a relative attribute to locate an element, the absolutely positioned pseudo-class element will be positioned in its setting relative to the parent element. If there is no other element, it will be relative to its root element. You can create an element that fills the browser window with it, placing it underneath the main element so that we can create a "page fade effect" through the link.

Make the title look like a ribbon three-dimensional effect

Everyone likes ribbons! Look at the Ribbon check out through HTML and CSS creation this snippet. This uses a bit of z-index negative form, which in some cases requires an additional container element to prevent the following pseudo-class elements from being in a transparent context.

List of numbers that decorate an ordered form

Have you ever tried to define a style for the number of ordered forms? You might wrap these numbers inside a span tag and define styles for them, but when we remove the style of span, we fall out. Or we might use a more crazy way of using digital pictures as backgrounds. or remove form styles, use your own numbers. such as all kinds. A better approach is to use pseudo-class elements to do this thing pseudo elements as counters.

Make the data form more adaptable

Using a small screen to look at a large data form is a nightmare. Not only zoom in or out vertically or horizontally, but they become too small to read when they shrink. We can reformat them by using the pseudo-class elements with CSS media queries, making them more readable to make the data table responsiveon a small screen.

Create Styling Tips

Using the HTML5 Data property, and then taking these attributes out, styling them into pseudo class elements, we can create a complete custom hint by creating completely custom tooltipsCSS.

the beauty of pseudo-class elements in Chinese original
The original:A Whole Bunch of amazing Stuff Pseudo Elements Can do