css - 添加 svg 作为伪元素
问题描述
我试图在两个不同的 div 之后放置一个 svg 作为伪元素。我的代码是
.mydiv:after{
content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='2em' height='1.5em' ><path d='M32,43.71a3,3,0,0,1-2.12-.88L12.17,25.12a2,2,0,0,1,0-2.83l1.42-1.41a2,2,0,0,1,2.82,0L32,36.47,47.59,20.88a2,2,0,0,1,2.82,0l1.42,1.41a2,2,0,0,1,0,2.83L34.12,42.83A3,3,0,0,1,32,43.71Z'/></svg>");
position:relative;
}
和 HTML
<h4><div class="mydiv">...</div></h4>
<small><div class="mydiv">...</div></small>
我的问题是 h4 和 small 有不同的尺寸 - 因此,svg 需要不同的尺寸和对齐方式。如何更改代码以使 svg 始终适应其前面的内容?
解决方案
.mydiv:after{
content:"";
display:inline-block;
width:20px;
height:20px;
background-image:url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='2em' height='1.5em' ><path d='M32,43.71a3,3,0,0,1-2.12-.88L12.17,25.12a2,2,0,0,1,0-2.83l1.42-1.41a2,2,0,0,1,2.82,0L32,36.47,47.59,20.88a2,2,0,0,1,2.82,0l1.42,1.41a2,2,0,0,1,0,2.83L34.12,42.83A3,3,0,0,1,32,43.71Z'/></svg>");
background-size:contain;
background-position:bottom center;
background-repeat:no-repeat;
}
推荐阅读
- c++ - 当我在将文件读取到二维 c 字符串数组后尝试计算任何内容时出现 C++ 分段错误
- php - 是否可以为不同的文件设置不同的 phpcs 配置值?
- reactjs - useTransition 与 react-spring 作为组件更改
- excel - 如何将所有单元格值存储在 VBA 中?
- c++ - handleMessage 看不到我的类和函数
- python - 如何在 iPad Pro 上运行 Python?
- javascript - 如何从名称值中收集所有数据以便我可以使用它?
- php - 在 PHP 应用程序中捆绑 React 文件?
- c++ - 重新排列数组的行和列的问题
- git - Git在不同的目录布局上添加远程