css3 - css小三角定位
問題描述
<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;}
怎么把小三角的位置調整到文字后面
問題解答
回答1:<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>回答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;}回答3:
position:absolute;right:0; top:0;文字元素的樣式記得加position:relative
相關文章:
1. python - (初學者)代碼運行不起來,求指導,謝謝!2. 為什么python中實例檢查推薦使用isinstance而不是type?3. mysql里的大表用mycat做水平拆分,是不是要先手動分好,再配置mycat4. window下mysql中文亂碼怎么解決??5. sass - gem install compass 使用淘寶 Ruby 安裝失敗,出現 4046. html5 - H5 SSE的本質是什么?7. javascript - h5上的手機號默認沒有識別8. python - 獲取到的數據生成新的mysql表9. python的文件讀寫問題?10. javascript - js 對中文進行MD5加密和python結果不一樣。
