CSS 右上角標簽是一個比較簡單的布局技巧，它可以幫助我們在網站設計中實現一些小細節的效果。相信你在很多網站中都看到過這種效果，比如一些新聞網站中的“熱點”、“置頂”標簽，或者一些電商網站中的“新品”、“促銷”標簽等。 要實現這種效果，我們首先需要明確一個概念：CSS 右上角標簽其實是一個類似于“角標”的小圖標，而不是一個完整的 HTML 元素。我們可以把這個小圖標用 CSS 的 ::before 或 ::after 偽元素來實現，然后通過定位和樣式設置來調整它的位置和樣式。 下面是一個實現右上角標簽的示例代碼：

.p-tag {
position: relative;
}
.p-tag::before {
content: "NEW";
background-color: #ff0000;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 2px 6px;
border-radius: 3px;
position: absolute;
top: 0;
right: 0;
}

這段代碼中，我們首先指定了一個容器元素 .p-tag 的 position 屬性為 relative，這將為后面的絕對定位提供了一個“參照點”。然后通過 ::before 偽元素來創建一個“NEW”標簽，設置一些基本樣式，比如背景顏色、字體顏色、字體大小、字體粗細、內邊距和邊框圓角等。最后通過 position: absolute、top: 0 和 right: 0 來把這個標簽定位到容器元素的右上角。 需要注意的是，這里我們使用了 ::before 偽元素而不是 ::after，是因為 ::before 會把這個元素添加在容器元素的前面，而 ::after 則是添加在容器元素的后面。在本例中，為了實現右上角的效果，我們需要把這個“NEW”標簽添加在容器元素的前面。 當然，我們可以根據具體的需求來調整這段代碼，比如更換標簽內容、調整樣式、改變定位方式等等。通過這種方式，我們可以很方便地實現一些小細節的效果，提升網站的可讀性和美觀度。 綜上所述，CSS 右上角標簽是一種比較常見的布局技巧，通過偽元素和定位設置可以輕松實現。在實際應用中，我們需要根據具體的需求進行調整和優化，以達到最好的效果。