I am trying to give some padding to a button IF the button has an external icon in it. If there is an external icon, I want to give the button the padding-right: 30px example. However, If there is no external icon, then the button shouldn't get the 30px padding. Currently, I am having the issue of the 30px padding-right still showing up even if there no external icon. Example
Is there a way to switch the CSS depending on the external icon being present or not?
Here is the HTML and 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>well it can be achieved by using :has() pseudo selector.
.btn:has(svg) {
padding-right: 30px;
}
but :has() is currently not supported by browsers so I would recommend to use it as of now.
but here's a work-around...
maybe you can add padding or marign to the icon itself.
.btn > svg { margin-right: 30px }
You need to use js for this, you're not able to do it with pure css you can do that by .style property and whenever you wanted that button to have a padding-right of 30 px you should add some js for example in this case i want to add this padding during the click event :
const btn=document.queryselector(".btn");
btn.addeventlistiner("click",()=>{
btn.style.padding="30px"
})
You can of course add it during another event it was just an example.