A brilliant pseudo-element-what can it do ?) The articles shared by others are found to be very good, and they have been decisively added to the favorites.

What can we do with a colorful pseudo-element? (Conversion) Articles shared by others, found very good, decisive collection, shine

Pseudo element:beforeAnd:afterWhat you can do is amazing. For each element on the page, you have two elements that are more flexible and can complete other HTML elements. They make a lot of interesting designs possible without negatively affecting your semantic tags. There are a lot of examples of these interesting effects. If you want to see them, let's take a look.

Multi-Background canvas

 

Because you can absolutely position pseudo elements relative to their parent elements, you can imagine that each element has two additional layers. Nicolas Gallagher shows us many of its applications, including multi-boundary, multi-background simulation of CSS3, and other high bars.

Increase the number of shapes that a single element can create

 

All the shapes above can be created with only one element, which is more practical. Compared with those using 1700divElements are neat, but not practical.

This is an example of a hexagonal 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;}

 

The URL of the link is displayed when the web page is printed.

 

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

 

Clear floating

 

Compared with inserting additional non-semantic tags to clear the floating of inline elements, we can use a pseudo element. It is also known as "clearfix" and the class name "group" is more semantic.

CSS

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

 

Simulate float: center;

The float attribute does not actually exist.centerThis value, although we may need it very much.floatAlthough there are left float and right float, we can use the placeholder pseudo element to take a place between two containers and put an image. Let's take a look at the effect.

Mark the code block with the corresponding language

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

HTML

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

CSS

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

Create a complete icon set

Nicolas Gallagher again upgraded his idea to creating a large group of icons. No image is used. Each two elements (at most) have only pseudo elements.

More efficient use of limited space

When CSS is used, it is also necessary. I mean, the contents of pseudo elements can be selectively applied or deleted through media queries. If space is limited, you may apply icons. If more space is available, you can use a more descriptive word.

Layout with many applicable 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 colors to make your title stand out.

CSS

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 bar of the same width as the browser

 

 

When you need to adapt to the background of the browser width, but the content of the element is not enough to open it, you will often use non-semantic inline element packages or repeated and tedious padding declarations. Maybe you can try to use elements to limit the width of the content to simulate the effect. You can set the width of the pseudo element to extend the title bar out of the boundary.

Create a body border

 

 

Set normalborder, Fixed the position of the pseudo element bar at the top and bottom. We can get a "body border" effect without using any special mark.

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

Create a pseudo-element block with a gradient from white to transparent, and place it inbuttonAnd place it frombuttonMove up, so that you can get a button that seems to have caught a little light when you hover your mouse over it. Only Firefox, chrome 26 +, and IE10 + are supported.

Anton trollbäck writes the original version. Nicolas Gallagher writes the version with pseudo elements, and I write another version myself.

Fade out the page when a special link is hovering over it

 

If you do not set relative positioning for the element, the absolute pseudo element will be located relative to the next parent element. If no other content is written, it is located relative to the root element. You can use it to fill the browser window, fold it under the main element, and then show it when hovering over the link to make a page fade out effect.

Make the header into a three-dimensional ribbon Style

We all like ribbons! Check the HTML and CSS snippets in this example. It uses a Negative z-index, which in some cases requires additional wrap elements to prevent elements below the parent element that loses background opacity.

Set a style for numbers in an ordered list

Have you tried writing styles for numbers in an ordered list? You are still doing these tedious things, such as wrapping them inspan, Write the style for the list item, and then followspanDelete the style together. Or use background images randomly. Or remove the list style and put it in your own number. These methods are all very bad. It is best to use pseudo elements as counters.

Make data tables responsive

 

It is terrible to browse large data tables on a small screen. They are either magnified and require horizontal and vertical scrolling, or scaled too small to read. We can combine CSS media queries and pseudo elements to quickly display and format data tables into a table that is more readable on a small screen.

Create a style prompt

 

Use the HTML5 data attribute, and then import the attribute and set the style to a pseudo element, so that we can use CSS to create a fully customized prompt.

Add separators between navigation items

If you want to separate nav items from each other, your choice is limited: you can add a border (boring ), or add additional tags (boring) between each project ). Pseudo elements allow you to use any content to separate projects.

CSS

.menu li:before {  content: "// ";  position: relative;  left: -1px;}

Make a website with no HTML at all

Automatic browser insertion,And<body>The tag function, Mathias Bynens shows how to create a website using only CSS and pseudo elements.

Build fonts written in CSS only

 

Use an HTML element (including a pseudo element) for each letter ). Yusuke Sugomori built a complete set of fonts through CSS and named them CSS Sans. This interactive demo shows you all the clever techniques Yusuke uses to build letters (suchrotate(Rotate ),border-radius(Rounded corner radius ),skew(Tilt ).

This font only contains uppercase Latin letters and is very cute! The CSS Sans Project is a great and creative demonstration built on various constraints!

 

 

 

 

According to @ Chris Coyier's "A Whole Bunch of Amazing Stuff Pseudo Do Elements Can Do", this article carries our own understanding and ideas, if the translation is poor or there is something wrong, ask your colleagues for advice. If you need to reprint this translation, you must specify the English Source: https://css-tricks.com/pseudo do-element-roundup /.

 

 

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