阻塞:如何给额外的填充按钮，只有当它有一个外部图标?

Question

我试图给一些填充按钮，如果按钮有一个外部图标在它。如果有一个外部图标，我想给按钮padding-right: 30px的例子。然而，如果没有外部图标，那么按钮不应该得到30px的填充。目前，即使没有外部图标，我也有30px填充权仍然显示的问题。示例

是否有一种方法来切换CSS取决于外部图标是否存在?

下面是HTML和CSS:

.btn {
border-radius: 3px;
border: none;
height: 45px;
font-weight: bold;
font-size: 18px;
background: #FFFFF;
color: #515151;
margin-top: 19px;
padding-top: 12px;
border: solid #FFFFFF 1px;
}

<a href="......." title="Hello World" class="btn btn-default" role="button" target="_blank">
Button Title
<svg class="svg-inline--fa fa-external-link fa-w-16 pull-right" title="external link icon" aria-labelledby="svg-inline--fa-title-u1BaVqD2mZ2F" data-prefix="far" data-icon="external-link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<title id="svg-inline--fa-title-u1BaVqD2mZ2F">external link icon</title>
</svg>
<!-- <i class="far fa-external-link pull-right" title="external link icon"></i> -->
</a>

Answer 1

可以通过使用:has()伪选择器来实现。

.btn:has(svg) {
padding-right: 30px;
}

但:has()目前不支持浏览器，所以我建议使用它作为现在。

但这里有一个解决方法…

也许你可以在图标本身添加填充或边距。

.btn > svg { margin-right: 30px }

Answer 2

你需要使用js，你不能用纯css做到这一点你可以通过。style属性来实现当你想让按钮的右padding值为30px时你应该添加一些js比如在这个例子中，我想在click事件中添加padding:

const btn=document.queryselector(".btn");
btn.addeventlistiner("click",()=>{
btn.style.padding="30px"
})

你当然可以在另一个事件中添加它，这只是一个例子。