CSS中的位數字外部加圓圈是一個非常實用的樣式，它可以讓我們在數字周圍加上圓圈來突出顯示這些數字。這對于創建價格列表、計數器和其他許多類型的內容都非常有用。

.num-circle {
display: inline-block;
position: relative;
padding-left: 20px;
margin-right: 10px;
}
.num-circle:before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
}
.num-circle span {
display: inline-block;
vertical-align: middle;
}

以上代碼使用了一個.num-circle類來創建一個數字使用的樣式。我們在樣式中設置了display: inline-block;讓數字在一行內顯示，并使用了position: relative;來將圓圈與數字對齊。

接著我們使用了:before選擇器來創建一個圓圈的偽元素。我們設置了position: absolute;，讓圓圈固定在數字的左側。同時，我們使用了transform: translateY(-50%);把圓圈垂直居中對齊到數字的中心。我們也可以使用其他的方法來垂直居中，比如使用display: flex;或者line-height來實現。

最后，我們為數字創建了另一個span元素，并使用了vertical-align: middle;把該元素垂直居中。這樣我們就完成了數字位圓圈的創建。

我們可以通過在.num-circle類后面添加相應的數字來使用該樣式。比如：

<p><span class="num-circle">1</span>這是第一個</p>
<p><span class="num-circle">2</span>這是第二個</p>
<p><span class="num-circle">3</span>這是第三個</p>

通過上面的代碼，我們就可以在數字周圍添加圓圈突出顯示數字了。