在CSS中，可以通過偽元素來畫出各種符號和圖形。本文就來介紹一下如何使用CSS來畫出一個嘆號。

.exclamation {
display: inline-block;
position: relative;
font-size: 24px;
font-weight: bold;
color: red;
width: 20px;
height: 50px;
margin-right: 10px;
}
.exclamation:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 30px;
margin-left: -1px;
background-color: black;
}
.exclamation:after {
content: '';
display: block;
position: absolute;
top: 30px;
left: 50%;
width: 6px;
height: 6px;
margin-left: -3px;
border-radius: 50%;
background-color: black;
}

首先，我們創建一個類名為exclamation的樣式規則，設置元素為行內塊元素，設定其位置為相對定位，字體大小為24px，字體加粗度為700，顏色為紅色，寬度為20像素，高度為50像素，在組成頁面時保持與其他元素10像素的間距。

然后，我們為exclamation設置偽元素before，在內容前插入一個空的塊級元素。將其定位到容器的頂部居中位置，使其向左移動一半自身寬度的距離，給其設置2像素寬度，30像素的高度，設置黑色背景色，這樣就畫出了一根豎線。

最后，在exclamation中為其添加偽元素after，在內容之后插入一個空的塊級元素。將其定位到容器的上半部分中央，使其向左移動一半自身寬度的距離，給其設置6像素的寬度，6像素的高度和50%的圓角，將其背景色設為黑色，這樣就可以在豎線上方畫出一個黑色的圓形。

以上就是畫出一個嘆號所需的CSS代碼。在HTML中，只需要將需要畫嘆號的元素的類名設置為exclamation即可。