--- title: "CSS Properties Explained: clear, clip-path, columns, content, and counter" description: "Let's look at each CSS property clear, clip-path, columns, content, and counter with detailed explanations and examples." author: "Ashutosh Patel" published: 2025-03-24 updated: 2025-03-24 canonical: https://www.mindstick.com/articles/338858/css-properties-explained-clear-clip-path-columns-content-and-counter category: "css-css3" tags: ["css-css3", "css", "css selector", "css styling", "css property"] reading_time: 4 minutes --- # CSS Properties Explained: clear, clip-path, columns, content, and counter Let's look at each CSS [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) `clear`, `clip-path`, `columns`, `content`, and `counter` with detailed explanations and examples. **1.** `clear` **(Managing Floats)** The `clear` property is used to control how [elements](https://yourviews.mindstick.com/story/1372/the-5-elements-of-nature) behave around floated elements. It prevents elements from wrapping around floated elements. ## Values | **Values** | **Description** | | --- | --- | | none | Default, allows [floating](https://www.mindstick.com/articles/85595/how-to-troubleshoot-when-your-floating-pond-fountain-is-not-working-properly) elements next to it. | | left | Prevents elements from floating on the left side. | | right | Prevents elements from floating on the right side. | | both | Prevents elements from floating on both sides. | **Example:** Clearing Floats ```html Clearing Floats Example
Floated

This paragraph will wrap around the floated div if `clear` is not applied.

``` The `.clearfix` class forces the [container](https://www.mindstick.com/interview/2198/what-method-is-used-to-specify-a-container-s-layout-in-java) to wrap around floated elements. **2.** `clip-path` **(Clipping an Element)** The `clip-path` property allows you to define a shape (circle, polygon, ellipse) to clip an element to **Example:** Clipping an Image into a Circle ```html Clearing Floats Example
Clipped Image Clipped Image Clipped Image
``` ## Output ![CSS Properties Explained: clear, clip-path, columns, content, and counter](https://www.mindstick.com/mindstickarticle/eea9ee31-86da-4722-858c-7c19ab1f99cd/images/ade659d3-ee90-46bf-89a7-4d88de9df95c.png) ## Note: - It works best with images and block elements. **3.** `columns` **(CSS Multi-Column Layout)** The `Columns` property splits text into [multiple columns](https://www.mindstick.com/forum/156805/how-to-set-primary-key-constraints-on-multiple-columns-in-a-table-in-sql-server). **Example:** Creating a Two-Column Layout ```html Clearing Floats Example

This text will be split into two columns. This text will be split into two columns. This text will be split into two columns. This text will be split into two columns. This text will be split into two columns.

``` ## Column Properties | **Property** | **Description** | | --- | --- | | column-count | Number of columns. | | column-width | Sets the width of each column. | | column-gap | Space between columns. | | column-rule | Line between columns. | ## Note: - [Responsive designs](https://www.mindstick.com/forum/160674/creating-responsive-designs-with-media-queries) can adjust [columns dynamically](https://www.mindstick.com/forum/161554/how-can-you-pivot-rows-into-columns-dynamically-using-t-sql). **4.** `content` **(CSS [Generated Content](https://www.mindstick.com/forum/158461/how-can-you-implement-cache-control-for-dynamically-generated-content))** The `content` property is used with the `::before` and `::after` pseudo-elements to insert content. **Example:** Add icon before text on button ```css .button::before { content: "🔹 "; } ``` ```html ``` Adding Quotes Dynamically ```css .quote::before { content: "“"; } .quote::after { content: "”"; } ``` ```css

This is a quote.

``` ## Note: - Useful for adding decorative content without modifying the HTML. **5.** `counter` **(CSS Counters)** The `counter` property is used to create [automatic](https://www.mindstick.com/interview/2449/what-is-automatic-reference-counting-arc) numbering. **Example:** Auto-Numbering Sections ```html CSS Counter Example
Introduction
Main Content
Conclusion
``` ## Note - Great for automatically numbering lists, sections or custom pagination. Also, read: [CSS Properties Explained: offset, opacity, order, outline, and overflow](https://www.mindstick.com/articles/338855/css-properties-explained-offset-opacity-order-outline-and-overflow) --- Original Source: https://www.mindstick.com/articles/338858/css-properties-explained-clear-clip-path-columns-content-and-counter Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.