Estoy tratando de dar algo de relleno a un botón SI el botón tiene un ícono externo. Si hay un ícono externo, quiero darle al botón el padding-right: 30px example . Sin embargo, si no hay un ícono externo, entonces el botón no debería tener el relleno de 30 px. Actualmente, tengo el problema de que el relleno derecho de 30 px sigue apareciendo incluso si no hay un ícono externo. Ejemplo
¿Hay alguna manera de cambiar el CSS dependiendo de si el ícono externo está presente o no?
Aquí está el HTML y 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>bueno, se puede lograr usando el pseudo selector :has() .
.btn:has(svg) { padding-right: 30px; } pero :has() actualmente no es compatible con los navegadores, por lo que recomendaría usarlo a partir de ahora.
pero aquí hay una solución...
tal vez pueda agregar relleno o marcar al ícono en sí.
.btn > svg { margin-right: 30px }Debe usar js para esto, no puede hacerlo con css puro, puede hacerlo con la propiedad .style y cada vez que desee que el botón tenga un derecho de relleno de 30 px, debe agregar algunos js, por ejemplo, en este caso, quiero agregar este relleno durante el evento de clic:
const btn=document.queryselector(".btn"); btn.addeventlistiner("click",()=>{ btn.style.padding="30px" })Por supuesto, puede agregarlo durante otro evento, fue solo un ejemplo.