css3 - css小三角定位

Question

<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;
}

怎么把小三角的位置调整到文字后面

Answer 1

雷雷

Answer 2

用偽元素: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;
        }

Answer 3

position:absolute;right:0; top:0;
文字元素的樣式記得加position：relative