问题：如何仅在按钮包含外部图标时为其添加额外内边距？

当然可以解决这个问题！你需要的是根据按钮内部是否存在外部图标来条件性地应用CSS样式，下面有两种可行的方案，你可以根据自己的浏览器兼容性需求选择：

方案1：使用:has()伪类（现代浏览器首选） #

:has()是CSS中非常实用的伪类，它能直接检测父元素是否包含指定的子元素，不需要修改现有HTML结构，代码简洁直观。

修改你的CSS代码，添加针对包含外部图标按钮的样式：

.btn { 
    border-radius: 3px; 
    border: none; 
    height: 45px; 
    font-weight: bold; 
    font-size: 18px; 
    background: #FFFFFF; /* 修正了你原代码中少写一个F的错误 */
    color: #515151; 
    margin-top: 19px; 
    padding-top: 12px; 
    border: solid #FFFFFF 1px; 
}

/* 仅当按钮包含外部图标时，添加右侧内边距 */
.btn:has(.fa-external-link) {
    padding-right: 30px;
}

说明：这个伪类支持Chrome、Firefox 121+、Safari 15.4+等现代主流浏览器，如果你的项目不需要兼容旧版浏览器，这是最优解。

方案2：添加额外类名（兼容旧浏览器） #

如果需要适配不支持:has()的旧版浏览器，可以给包含外部图标的按钮手动添加一个额外的类名（比如btn-with-icon），然后针对这个类设置样式。

修改后的HTML： #

<!-- 带外部图标的按钮 -->
<a href="......." title="Hello World" class="btn btn-default btn-with-icon" 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> 
</a>

<!-- 不带外部图标的按钮（保持原有类名） -->
<a href="......." title="Hello World" class="btn btn-default" role="button" target="_blank"> 
    Button Title 
</a>

对应的CSS： #

.btn { 
    /* 你的原有样式 */
    border-radius: 3px; 
    border: none; 
    height: 45px; 
    font-weight: bold; 
    font-size: 18px; 
    background: #FFFFFF;
    color: #515151; 
    margin-top: 19px; 
    padding-top: 12px; 
    border: solid #FFFFFF 1px; 
}

/* 仅给带图标的按钮添加右侧内边距 */
.btn-with-icon {
    padding-right: 30px;
}

说明：这种方法兼容性拉满，所有浏览器都能支持，唯一的小缺点是需要手动维护按钮的类名，确保带图标的按钮都加上btn-with-icon。

内容的提问来源于stack exchange，提问作者user16675052