在网页设计的过程中，我们需要让某些特定的内容呈现出特别的效果，比如突出显示某个商品的价格优惠。这时，我们可以利用 CSS 技术来添加打折角标来强调这个优惠信息。

.discount {
position: relative;
display: inline-block;
margin: 10px;
padding: 5px;
font-size: 18px;
font-weight: bold;
color: #333;
text-align: center;
}
.discount::before {
position: absolute;
content: '';
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 30px solid #f00;
border-right: 30px solid transparent;
}
.discount::after {
position: absolute;
content: '折';
top: 10px;
right: 5px;
padding: 0 5px;
background-color: #f00;
color: #fff;
}

在上面的代码中，我们首先定义了一个名为 discount 的 class，用来表示需要添加打折角标的内容。我们使用相对定位来让打折角标的绝对定位基于该元素，从而在该元素的底部右上角添加一个红色的三角形。

注意到 before 和 after 的语法，它们使用了双冒号（::）标记伪元素。在 before 中，我们设定了它的右侧为透明的，这样可以产生一个三角形的特殊效果。而在 after 中，我们通过 content 属性来显示“折”字，同时设定了元素的背景颜色为红色，颜色为白色。

最后，我们只需要在需要添加打折角标的内容中添加 discount 类即可：

<p>这件商品原价为 $100，现在仅需 <span class="discount">$70</span> 即可购买。</p>

通过以上 CSS 代码，我们成功地将 $70 的文字加上了打折角标，并将其突出显示。这样，我们就可以通过 CSS 来让某些内容在页面中更加醒目突出。