Mastering CSS content: How to Use ::before, ::after and Replace Elements

Introduction

When developing you often need to clear floats, add small icons, or replace content, which leads you to the content property. It is typically found via a quick web search, but this article provides a detailed explanation of its mechanism.

The content property works with the ::before and ::after pseudo‑elements to insert generated content. The inserted content is an anonymous replaceable element. First, let’s understand what a replaceable element is.

Replaceable Elements

Consider image loading:

<img src="1.jpg"><br/><!--replace--><br/><img src="2.jpg"><br/>

Changing the src attribute changes the displayed image. Elements whose content can be replaced via attribute changes are called replaceable elements.

Typical replaceable elements: <img>, <video>, <iframe>, <textarea>, <input>.

Size Calculation Rules for Replaceable Elements

There are three size types:

Intrinsic size: the original size of the replaced content.

HTML size: the native width and height attributes.

CSS size: the width and height set via CSS.

Example with img:

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

Resulting display order: CSS size > HTML size > intrinsic size.

Relationship Between Replaceable Elements and content

A replaceable element’s content can be swapped because its content box is replaceable. The content property determines whether an element behaves as replaceable.

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

Hovering replaces the visual image, but the original src remains when saving the image.

Usage Scenarios of content

The content property is used together with ::before and ::after, the most common pseudo‑elements.

Default display is inline.

Must set content, otherwise ineffective.

Default user-select: none – content cannot be selected.

They do not exist in the DOM; they are visual only.

Insert Characters

Use content to provide default text for empty elements, similar to a placeholder:

<p>Paragraph with content</p><br/><p></p><br/><br/><!--:empty matches empty elements--><br/>p:empty::before {<br/>  content: 'Empty element content';<br/>  color: red;<br/>}<br/>

Auxiliary Element Generation

Set content to an empty string and use CSS to create shapes or layouts.

Graphic Effect

<div class="content-box"></div><br/><br/>.content-box {<br/>  height: 100px;<br/>  width: 200px;<br/>  border-radius: 10px;<br/>  position: relative;<br/>  background: #fff;<br/>}<br/>.content-box::after {<br/>  content: '';<br/>  position: absolute;<br/>  top: 100%;<br/>  right: 16px;<br/>  width: 4px;<br/>  height: 16px;<br/>  border-right: 12px solid #fff;<br/>  border-radius: 0 0 32px 0;<br/>}<br/>

Clear Floats

<div class="info-box clear"><br/>  <div class="left">Left</div><br/>  <div class="right">Right</div><br/></div><br/><br/>.clear::after {<br/>  content: '';<br/>  display: block;<br/>  clear: both;<br/>}<br/>

All three parts are required: content: '', clear: both, and display: block. This triggers a BFC, allowing the parent to adapt its height.

Image Generation

Use url() in content to replace text with an image or add images before/after text.

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

Generating Content from Attributes ( attr() )

<a class="baidu-link" href="https://baidu.com">百度一下，你就知道!</a><br/><br/>.baidu-link::after {<br/>  content: " (" attr(href) ") ";<br/>}<br/>

Character Content Generation

Directly write characters, including Unicode, often used with @font-face to create icon fonts.

@font-face Rule

@font-face {font-family: "iconfont";<br/>  src: url('iconfont.eot'); /* IE9 */<br/>  src: url('iconfont.eot#iefix') format('embedded-opentype'),<br/>       url('iconfont.woff') format('woff'),<br/>       url('iconfont.ttf') format('truetype'),<br/>       url('iconfont.svg#iconfont') format('svg');<br/>}<br/><br/><div class="look-more">查看更多</div><br/><br/>.look-more {<br/>  font-size: 14px;<br/>  &::after {<br/>    font-size: 14px;<br/>    font-family: 'iconfont';<br/>    content: '\e6a7';<br/>  }<br/>}<br/>

Counters

CSS counters allow automatic numbering that increments as elements are added.

Key properties: counter-reset: defines a counter name and its initial value. counter-increment: defines how the counter increases. counter() / counters(): output the counter value, with counters() supporting hierarchical numbering.

.count-test { counter-reset: counter; }<br/>.count-test { counter-reset: counter 2; }<br/>.count-test { counter-reset: counter 2 counterpre -1; }<br/><br/>counter-increment: counter;<br/>counter-increment: counter 2;<br/>counter-increment: counter 2 counterpre -1;<br/><br/>.counter { counter-reset: counter 2; }<br/>.counter:before { content: counter(counter); }<br/>

Example of nested counters producing hierarchical numbers like 1.1, 1.2, 2.1, etc.

Conclusion

Understanding the CSS content property expands layout possibilities and provides handy techniques for clean, maintainable front‑end development.

References

https://developer.mozilla.org/zh-CN/

https://css-tricks.com/pseudo-element-roundup/