可以使用 CSS 控制伪元素（:before 和 :after）并添加样式的方法如下：
伪元素:before和:after可以在一个元素的内容前面或者后面添加虚构的元素。它们可以被用于添加装饰性的内容，例如箭头、图标和分隔符。
.element:before {
content: "";
display: block;
width: 10px;
height: 10px;
background-color: red;
}
上面的代码将在 .element 元素前面添加一个宽度和高度为 10px 的红色块。
可以使用 CSS 属性来控制伪元素的样式，例如 font-size、color 和 border。下面的代码将在 .element 元素前面添加一个包含 “hello” 文字的红色块。
.element:before {
content: "hello";
display: block;
width: 50px;
height: 50px;
background-color: red;
color: white;
font-size: 20px;
text-align: center;
}
上面的代码将在 .element 元素前面添加一个宽度和高度为 50px 的红色块，其中文本为 “hello”，文本颜色为白色，字体大小为 20px，文本居中显示。
伪元素:before和:after可以用来制作三角形，只需将宽度和高度设置为 0，然后将宽度和高度设置为 0，再将一个边框设置为实心，另外两个边框设置为透明即可。
.triangle {
position: relative;
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-bottom: 0 solid transparent;
border-left: 50px solid transparent;
}
.triangle:before {
content: "";
position: absolute;
left: -50px;
top: 0;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid red;
border-bottom: 50px solid transparent;
border-left: 0 solid transparent;
}
上面的代码将在 .triangle 元素前面添加一个三角形，其中红色边框为三角形的底部，透明边框为三角形的两侧和顶部。
