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宿主机无法访问容器中的服务？2. 老师，flex-shrink: 1; 按视频操作，不会自动缩放3. php为什么是源程序显示？4. python - 多线程小白求问这样的IP要怎么实现多线程print？5. javascript - 我这个页面的main的盒模型为什么把header的模型空间也包括了。6. python - Django表单Form.save()问题7. Android-Studio 新建项目 Missing styles8. html5 - node静态资源服务器设置了Cache-Control，但浏览器从来不走3049. html5 - 在HBuilder中打包Android的apk包出错，不知道是什么原因。10. golang - 用IDE看docker源码时的小问题
网公网安备