CSS中加號和減號的變化在前端界中是相當常見的，下面我們來看一下如何實現(xiàn)這種變化。

/* HTML 代碼 */
<div class="box">
<span class="icon">+</span>
<p>這是一個內(nèi)容塊</p>
</div>
/* CSS 代碼 */
.box {
border: 1px solid #ccc;
padding: 10px;
position: relative;
}
.icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
transition: all .2s;
}
.icon:before {
content: '-';
}
.icon.open:before {
content: '+';
}
.box.open {
height: 200px;
}
.box p {
display: none;
}
.box.open p {
display: block;
}

首先我們把要加減號的文字隱藏掉（代碼塊里的“這是一個內(nèi)容塊”），并通過用一個span元素來模擬加減號的樣式。同時，為了能夠在點擊加減號后動態(tài)切換狀態(tài)，我們使用了JavaScript來為元素添加或移除class。

然后，我們通過添加:before偽類的方式，實現(xiàn)了加減號的切換。通過這個偽類，在.icon元素中添加content: '-'，這樣初次加載頁面時這個元素就會顯示一個減號。當.icon元素被添加open類時，我們將偽類中的content改為'+ '，從而實現(xiàn)了加減號樣式的切換。

最后，我們通過為.box元素添加open類來動態(tài)展開/關(guān)閉內(nèi)容。當.box被添加open類時，我們讓它的高度為200px，然后將其中的p元素顯示出來。這樣在點擊加減號時，內(nèi)容會動態(tài)地展開/關(guān)閉，同時加減號的樣式也會隨之變化。

除了這種基礎(chǔ)的實現(xiàn)方式，還有更多優(yōu)化的方式，例如使用絕對定位將加減號放置在一起等等。總之，實現(xiàn)方式層出不窮，主要看需求和個人選擇。