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  title="external link icon"></i> -->
</a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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 }

CodePudding user response：

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 .

happy coding