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. docker-compose 为何找不到配置文件？2. python的bs4如何筛选出h1标签中的内容3. angular.js - 通过数据中children的个数自动生成能点击展开的div4. css - 使用blur()滤镜为什么有透明的效果5. docker gitlab 如何git clone？6. android - 安卓做前端，PHP做后台服务器 有什么需要注意的？7. 前端 - css3 3d效果问题8. java - spring-data Jpa 不需要执行save 语句，Set字段就可以自动执行保存的方法？求解9. javascript - 移动端H5页面禁止缩放了，在浏览器上仍然可以缩放10. javascript - JS设置Video视频对象的currentTime时出现了问题,IE,Edge,火狐,都可以设置,反而chrom却...
网公网安备