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;}
怎么把小三角的位置調(diào)整到文字后面
問題解答
回答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
相關(guān)文章：
1. javascript - html5的data屬性怎么指定一個(gè)function函數(shù)呢？2. javascript - Express 和 request 如何代理遠(yuǎn)程圖片？3. python - 在使用Pycharm時(shí)經(jīng)常看到如下的樣式，小括號(hào)里紅色的部分是什么意思呢？4. javascript - 你們?cè)鯓訉?shí)現(xiàn)前端分頁(yè)的？5. javascript - 移動(dòng)端粘貼事件，onpaste事件在app中無效，在app中怎么監(jiān)測(cè)到粘貼事件6. android - react-native 的headless.js Java API 的代碼怎么使用？7. javascript - 關(guān)于fullpage.js 自動(dòng)高度失效的問題8. python - Scrapy存在內(nèi)存泄漏的問題。9. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?10. angular.js - angular2 有什么cool的loading組件么？
網(wǎng)公網(wǎng)安備