我在“a”标签前后应用了两个 svg 图像,方式如下:
<li>
<a href="#">
plan
</a>
</li>
CSS:
.navigation ul li::before {content:url('left.svg'); position: relative; top: 6px;}
.navigation ul li::after {content:url('right.svg'); position: relative; top: 6px;}
图像出现了,但它们很大,所以我尝试这样调整它们的大小:
<svg width="10" height="23" viewbox="0 0 102 102">
<li>
<a href="#">
explore
</a>
</li>
</svg>
但 svg 标记并未应用于 svg 图像,它仅将 'a' 标记作为子标记。我真的不知道如何有效/简单地做到这一点——我想做的就是确保那些出现在 a 标签之前和之后的 svg 图像被缩小。
最佳答案
除了在 content
中使用您的 SVG 图片,您可以将它用作 background-image
,并向您的伪元素添加高度/宽度:
.navigation ul li:before,
.navigation ul li:after {
content: " ";
background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg');
background-size: cover;
position: relative;
display: inline-block;
top: 6px;
width: 20px;
height: 20px;
}
<nav class="navigation">
<ul>
<li>
<a href="#">plan</a>
</li>
</ul>
</nav>
关于css - 调整大小 svg 应用于元素之前和之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29533048/