Chen Chen, a front-end engineer of wemedical Cloud service team, is a programmer who “life lies in stillness”.

preface

In the development of similar to clear floating, small ICONS, replace content and other scenarios will inevitably encounter the content attribute, is generally baidu under the solution, very little detailed, in the “CSS World” book to read the content chapter, today here in detail the use of the mechanism of content. The content attribute is used in conjunction with the :before and: After pseudo-elements to insert generated content. Content inserted using the Content attribute is an anonymous, replaceable element. So first of all, what are substitutable elements?

Replace the element

First look at image loading:

<img src="1.jpg"> <! <img SRC ="2.jpg">Copy the code

The SRC attribute of img was modified, causing the image to be displayed to change. An element that can be replaced by modifying the content rendered by an attribute value is called a “replacement element.”

Typical replacement elements: ,

Replace element size calculation rules

The size calculation rules for replacement elements have three sizes:

  • Proper size: Replace the original size of the content
  • HTML size: HTML native properties width and height
  • CSS Size: the width and height of the CSS

Let’s take img as an example:

<img src=".. /assets/test1.jpeg"> <img width="300" height="200" class="img-test" src=".. /assets/test1.jpeg"> <img class="img-box" width="300" height="200" src=".. /assets/test1.jpeg"> .img-box { height: 100px; width: 200px; }Copy the code

The effect is as follows:

The first image: the default size of the original image is 267 * 200;

Second image: set the HTML dimensions width and height to display the image 300 * 200;

Third image: Set the CSS size to 200 * 100.

The priority of the size display rule is CSS size > HTML size > proper size.

What is the relationship between the substitution element and the content?

A replacement element is a replacement element because its content is replaceable, i.e. the Content box in the box model is replaceable. The CSS content property is used to replace the content. In other words, the content property determines whether to replace the element or not. The code is as follows:

<img width="300" height="200" class="img-test" src=".. /assets/test1.jpeg"> .img-test:hover { content: url('.. /assets/test2.jpg'); }Copy the code

The effect is as follows:When the mouse hover, the picture is’.. /assets/test2.jpg ‘replaces img’s Content box with the content property.

Note that the content property only changes the visual presentation. When we right-click or save the image, we still save the original SRC image.

Usage scenarios of Content

Content is used in conjunction with the :before and :after pseudo-elements. :before and :after are the most common false elements.

A: Before and :after:

  • Default display: inline;
  • The content property must be set, otherwise it is invalid;
  • Default user-select: none, that is :before and :after contents cannot be selected by the user;
  • You can’t use the DOM, which is a page element that doesn’t exist in itself, you can’t find it in the HTML source code, but you can visually see it.

Here’s a look at the main usage scenarios:

Insert the character

The content insert character sets the default value for the empty element. Similar to the input placeholder property, it will only be displayed when the element has no content.

<p> Paragraph with content </p> <p></p> <! --:empty is a CSS selector that matches elements with no content --> p:empty::before {content: 'empty element content '; color: red; }Copy the code

The effect is as follows:

Auxiliary element generation

The core point here is not the content generated by content, but the pseudo-element itself. Normally we would set the value of the content property to an empty string and use other CSS code to generate auxiliary elements, or to implement graphical effects, or to implement a specific layout.

Graphic effect

Insert an anonymous replacement element with the ::after pseudo-element and set content to null. This element has no content and uses CSS styles to achieve the desired graphical effect. The code is as follows:

<div class="content-box"></div>

.content-box {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.content-box::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 16px;
  width: 4px;
  height: 16px;
  border-width: 0;
  border-right: 12px solid #fff;
  border-radius: 0 0 32px 0;
}
Copy the code

The effect is as follows:

Remove the floating

Clear float to solve the problem that the parent element has an internal height of 0 due to the float of the child element.

<div class="info-box clear"> <div class="left"> <div class="right"> </div>. Clear ::after {content: "; display: block; clear: both; }Copy the code

All three are indispensable:

  • Content: “: adds an empty pseudo-element to the element via ::after.
  • Clear: both: clear float, so that the elements around both sides do not float.
  • Display: block: clear applies only to block-level elements.

By adding elements to clear the float, the BFC is touched so that the height of the element can adapt to the height of the subbox.

Images generated

Directly use the URL function to display pictures, you can add pictures before and after the text, and you can directly replace the text.

Image directly replace text, the code is as follows:

<p class="img-test"> </p>. Img-test {display: block; height: 20px; width: 20px; border-radius: 100%; content: url('.. /assets/test2.jpg'); }Copy the code

Add pictures before and after the text, the code is as follows:

<! -->.img-test::after {content: url('.. /assets/test2.jpg'); } <! -->.img-test::after {content: "; display: block; height: 20px; width: 20px; background: url('.. /assets/test2.jpg'); }Copy the code

In scheme 1, the pseudo-elements are set by content, and the size of the picture is not easy to control. The display picture is the original size, which is fuzzy. Generally, the background picture in Scheme 2 is used, and the size can be set as required.

Attr Attribute value content generation

Attr = attr; attr = attr; attr = attr;

<a class="baidu-link" href="https://baidu.com"> </a> .baidu-link::after { content: " (" attr(href) ") " }Copy the code

The effect is as follows:

Character content generation

The generation of character content is to write the character content directly, both Chinese and English can be used, the more common application is to implement the icon font effect with the @font-face rule.

@ the font the forum rules

The @font-face rule specifies a custom font to display the text; Fonts can be loaded from a remote server or from a font installed locally by the user. Its properties are similar to fonts, as follows:

Font descriptor describe
font-family Required: The specified font name will be used for the FONT or font-family property
src Required: URL of the remote font file location or font name on the user’s computer
font-style The style for the font referred to by SRC
font-weight The font size
font-stretch Define how the font should be stretched
unicode-range The font supports a range of Unicode characters

The code for using the @font-face rule looks like this:

<! < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 25px; font-size: 14px; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome, firefox */ url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, IOS 4.2 + * / url (' iconfont. Svg# iconfont ') format (' SVG); /* iOS 4.1- */} <! -- HTML --> <div class="look-more"> </div> <! --css--> .look-more { font-size: 14px; &::after { font-size: 14px; font-family: 'iconfont'; content: '\e6a7'; }}Copy the code

The effect is as follows:

In the image above, the arrow after “See more” is the font icon defined above.

Background-position: initial; background-repeat: initial; background-repeat: initial; background-repeat: initial; background-repeat: initial; background-repeat: initial; background-repeat: initial;

counter

The content counter uses CSS code to increase the number of elements as the number of elements increases. Very powerful, practical, and not fungible.

A counter contains two properties and one method:

  1. Counter -reset = counter-reset = counter-reset = counter-reset It also tells you which number to start counting from. The default value is 0, and the value can be negative.
<! -- counter name is counter, default is 0-->.count-test {counter-reset: counter; } <! -- counter name = counter, initial count = 2-->.count-test {counter-reset: counter 2; } <! -- Multiple counters named at the same time, separated by Spaces -->.count-test {counterreset: counter 2 counterpre-1; }Copy the code
  1. Counterincrement: One or more counterreset keywords, followed by a number, indicating the change value of each counter. The default change value is 1, and the value can be negative.
<! -- increment counter by default --> increment_counter; <! -- increment counter by 2--> counter increment: counter 2; <! -- increment counter counter by 2, increment counterpre counter by 1--> Increment counter 2;Copy the code

“General rule” : Counter -reset source is unique, each counter-reset (counter-increment), increase the value of the general source.

<p class="counter"></p> <! <p> <p style = "font-size: 10px; font-size: 10px; counter-increment: counter; } .counter:before { content: counter(counter); } <! -- increment1 --> increment2 -->. Counter {counter-reset: counter 2; } .counter:before { counter-increment: counter; content: counter(counter); } <! Increment1 -->. Counter {counter-reset: counter 2; counter-increment: counter; } .counter:before { counter-increment: counter; content: counter(counter); }Copy the code
  1. Counter ()/counters() : both count methods, display the count, and counters are used for nested counts.
<! --name = counter-reset --> counter(name) <! --> counter(name, style) <! --string Indicates the subordinal concatenation string. For example, in 1.1, string is '.', 1-1 is '-'--> counters(name, string)Copy the code

Generally used for similar directories and regular changes in the count, the following hierarchy directory as an example, code as follows:

<div class="reset"> <div class="counter"> Replace element <div class="reset"> <div class="counter"> Replace element size calculation rules </div> <div Class ="counter"> </div> </div> <div class="counter"> <div class="reset"> <div class="counter"> Insert character </div> <div div> <div class="counter" Class ="counter"> </div> <div class="counter"> </div> <div class="counter"> </div> <div class="counter"> Attr attribute value content generation </div> <div <div class="counter"> <div class="counter"> </div> </div> </div> </div>. } .counter:before { content: counters(counter, '.') '. '; counter-increment: counter; }Copy the code
  • Counter defaults to 0 and increments to 1 by default;
  • There are two sibling conter tags below the first reset, and increments are 1 and 2;
  • The first counter has a reset label under it, so it has a layer of reset counts, so it has 1.1, 1.2, etc.
  • Similarly, there are 2.1, 2.2 and so on under the second counter.

The effect is as follows:

conclusion

Understanding the content property of CSS opens up more possibilities for layouts and helps you use some layout tricks as needed in your daily development to keep your layouts simple and clear.

The resources

  • developer.mozilla.org/zh-CN/
  • Css-tricks.com/pseudo-elem…