<p>文字<span class="triangle-down"></span></p>
.triangle-down { width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray; }
怎么把小三角的位置调整到文字后面
光阴似箭催人老，日月如移越少年。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:after { content: ""; display: inline-block; width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray; } </style> </head> <body> <p>文字</p> </body> </html>
用伪元素:after
<p>文字</p> p:after { content: ""; display: inline-block; width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray; }
position:absolute;right:0; top:0;文字元素的样式记得加position：relative
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
用伪元素:after
position:absolute;right:0; top:0;
文字元素的样式记得加position：relative