CSS3中的content屬性是用于在HTML文檔中插入額外的內(nèi)容的。這個(gè)屬性通常用于在偽元素（:before和:after）中添加內(nèi)容。當(dāng)我們使用content屬性時(shí)，可以添加一些文本、圖片、計(jì)數(shù)器或?qū)傩灾档鹊取Ｏ旅媸且粋€(gè)使用content屬性來(lái)添加計(jì)數(shù)器樣式的例子：

p::before {
content: counter(myCounter);
counter-increment: myCounter;
}

上述代碼會(huì)在每個(gè)<p>元素前面自動(dòng)加上一個(gè)有序數(shù)字列表，每次+1。

我們也可以使用content屬性來(lái)插入一些文本或圖像。下面是一個(gè)使用content屬性在一個(gè)按鈕上添加文字的簡(jiǎn)單例子：

.button::before {
content: "Buy Now";
}

上述代碼會(huì)在一個(gè)按鈕前面自動(dòng)添加一個(gè)“Buy Now”的文本。

除此之外，content屬性還可以用于配合 attr() 函數(shù)來(lái)獲取 HTML 元素的屬性值并應(yīng)用到 CSS 中。下面是一個(gè)使用content和attr()函數(shù)來(lái)獲取input元素的value值的例子：

input::before {
content: attr(value);
}

上述代碼會(huì)在一個(gè)input元素前面自動(dòng)添加這個(gè)元素的value值。這樣的用法可以大大地簡(jiǎn)化代碼，避免一些冗長(zhǎng)的JavaScript操作。

總之，content屬性是一個(gè)很有用的CSS3功能，可以幫助我們?cè)趥卧刂蟹浅７奖愕靥砑右恍╊~外的內(nèi)容。需要注意的是，content屬性必須配合:before或:after偽元素使用，否則會(huì)無(wú)效。