The pseudo-elements that shine--what can be done? (turn) Others to share the article, found very good, decisive collection of

Pseudo- :before elements :after and things that can be done are pretty amazing. For each element on the page, you have two more flexible elements that can be done with other HTML elements. They make a lot of interesting designs possible without negatively impacting your semantic tags. Here are a bunch of examples of these interesting effects that you want to see and then look down.

Multiple Background canvas

Because you can absolutely position pseudo-elements relative to their parent class elements, you can imagine that each element has two extra layers. Nicolas Gallagher shows us many of its applications, including the multilateral community, analog CSS3 multiple backgrounds, etc. gaolan.

Increase the number of shapes a single element can create

All of the above shapes can be created with just one element and are more practical. It's div neat, but not practical, for those who use 1700 elements to "make a coffee cup with pure CSS."

Here is an example of a hex star:

Css

#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;}

Show the URL of a link when you print a Web page

{  a[href]: After{    content: "(" attr (HREF) ")";  } }

Clear floating

Instead of inserting additional non-semantic tags to clear the floating of inline elements, we can use a pseudo-element to accomplish this. Commonly known as "Clearfix", and the use of the class name "group" is also more semantic.

Css

{  content:"";   display:table;}  {  clear:both;}  {  zoom:1/**/}

Analogue Float:center;

The Float property does not actually have center this value, although we may need it very much. floatAlthough there is a left float and a right float, we can also take a look at the effect by using a placeholder pseudo-element to occupy a single position between two containers and place an image.

Tag blocks of code using the corresponding language

The current design of this site is to use pseudo-elements to tag blocks of code in different languages.

Html

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

Css

{  content: attr (rel);   position: absolute;   top: 22px;   Right: 12px;}

Create a complete set of icons

Nicolas Gallagher again raised his idea to create a large set of icons. No images are used, each of the two elements (up to) only pseudo-elements.

Use limited space more efficiently

The use of CSS has gained, there must be some loss. I mean, the contents of a pseudo-element can be selectively applied or deleted through media queries. If the space is limited, you may apply the icon, and if you have more space, you can use a more descriptive word.

Multiple layouts for your content

If your pseudo-elements are text, they inherit the same layout style as their parent elements. But when you set their content, you can also edit their styles. For example, use different fonts and different colors to make your headline stand out.

Css

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

Create and browser-width bars

When you need to adapt to the background of the browser's width, but the content of the element is not enough to open it, you tend to use non-semantic inline elements wrapped or repetitive and cumbersome spacing declarations. Perhaps you could try using elements to constrain the width of the content to simulate the effect by setting the width of the pseudo element to extend the title bar beyond the bounds.

Create a body border

On the left and right side, set the normal border , fixed position of the pseudo-element bar at the top and bottom. Without using any special tags at all, we can get a "body border" effect.

Css

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 flashing button

Make a pseudo-element block that has a white-to-transparent gradient, put it button outside, and then move it from the top as you hover over it, button so you can get a button that seems to catch a little light when you hover over the mouse. Only Firefox, Chrome 26+ and ie10+ support.

Anton Trollbäck wrote the original effect, Nicolas Gallagher wrote the version with pseudo-elements, and I wrote another version myself.

Fade a page when a special link is hovering over the mouse

If you do not set the relative positioning of the element, the pseudo element of absolute positioning is positioned relative to the next parent element. If no other content is written, it is positioned relative to the root element. You can use it to make an element that fills the browser window, fold it relative to the main element, and then display it when the mouse hovers over the link, making a page fade out of the effect.

Style the header into a three-dimensional ribbon

We all love ribbons! Take a look at the HTML and CSS fragments for this example. It uses a negative z-index, which in some cases requires additional wrapping elements to prevent the loss of background opaque elements beneath the parent element.

Set styles for numbers in an ordered list

Have you ever tried to write a style for numbers in an ordered list? You still do these tedious things, such as wrapping them span inside, writing styles for the list items, and then span deleting the styles together. Or use the background image in a haphazard way. Or remove the list style and put it in your own number. All of these methods are very bad. It is best to use pseudo-elements as counters.

Make the data table responsive

It's scary to browse large data sheets on a small screen. They are either magnified and require horizontal and vertical scrolling, or are shrunk too small to be readable. We can combine CSS media queries with pseudo-elements to make the tables react quickly and format them into a more readable form on a small screen.

Create a styled hint

Use the HTML5 Data property, and then import the property and set the style to a pseudo-element so that we can use CSS to create a fully customizable hint.

Add a delimiter between navigation item

If you want to separate NAV items from each other, your choices are limited: You can add a border (very boring), or add extra tags (and boredom) between each item. Pseudo-elements allow you to use any content between projects as a separator.

Css

{  content: "//";   position: relative;   Left: -1px;}

Make a Web site with no HTML at all

With browser auto-insertion , and <body> tag functionality, Mathias Bynens shows how to create a Web site using only CSS and pseudo-elements.

Build fonts that are written only in CSS

For each letter, use an HTML element (including pseudo-elements). Yusuke Sugomori A complete set of fonts, named CSS Sans, through CSS. This interactive demo lets you see all the clever techniques that Yusuke uses to build letters (such as rotate (rotation), ( border-radius fillet radius), skew (tilt), and so on).

This set of fonts only includes the uppercase Latin alphabet, and very cute! The CSS sans project is a great creative demonstration built on a variety of constraints!

This article according to @chris Coyier "a Whole Bunch of amazing Stuff Pseudo Elements Can do" translation, the entire translation with our own understanding and thinking, if the translation is not good or the wrong place also please peer friends pointing. If you want to reprint this translation, please specify the English source: https://css-tricks.com/pseudo-element-roundup/.

Original address: http://www.w3cplus.com/css3/pseudo-element-roundup.html

The pseudo-elements that shine--what can be done? (turn) Others to share the article, found very good, decisive collection of