Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I apply padding to a button only if it contains an external icon? If the button has an external icon, I want to give it padding-right: 30px (example). However, if there is no external icon present, then the button should not have the 30px padding. Currently, I am facing the issue of the 30px padding-right still being applied even when there is no external icon present (Example).

Is there a way to toggle the CSS based on the presence of an external icon?

Below 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>

javascripthtmljquerycsscss-selectors

Answer №1

To achieve this, you can utilize the :has() pseudo selector.

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

Unfortunately, :has() is not currently supported by browsers, so it may be best to avoid using it for now.

However, there is a workaround available...

You could try adding padding or margin directly to the icon itself.

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

Answer №2

To achieve this effect, JavaScript is required as it cannot be done using only CSS. By utilizing the .style property, you can dynamically adjust the styling of an element. For instance, if you want a button to have a padding-right of 30 pixels upon clicking, you would need to incorporate some JavaScript. Here's an example implementation where the padding is added during a click event:

const button = document.querySelector(".button");
button.addEventListener("click", () => {
  button.style.paddingRight = "30px";
});

It's worth noting that this adjustment can be made in response to various events, not just clicks.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective way to alter the elements in a JavaScript array based on the total count of another element's value?

I have a task where I need to manipulate an array by adding or removing elements based on the total count of another value. let data = [ { "details": [ { "Name": "DataSet1", "Severity": "4& ...

javascriptarraysjsonjavascript-objects

When the JavaScript string retrieved from the database is null, it will be displayed as an empty string

Currently, my Ajax setup involves querying a database on the server with SELECT someColumn FROM someTable. The returned value of someColumn is then updated on the client side by using $('#someElement').text(someColumn); Everything works perfectl ...

phpjavascriptjquerymysqlajax

Is it acceptable to use the return value of false in order to resolve the ESLint consistent-return error when working with asynchronous functions

When working with ExpressJS, I encountered a situation where I needed to execute and adhere to ESLint rules in my code. One particular rule that caused an issue is "consistent-return", which flagged the following code snippet: function getUsers( req, res, ...

javascriptnode.jsexpressasynchronouseslint

Creating a dynamic onclick function that depends on a variable passed from a while loop in PHP

If you're familiar with PHP, I have a scenario for you. Let's say there's a list of items generated using a while loop in PHP. Each item has a sub-list that should only appear when clicked on. I tried using the onclick function in jQuery but ...

javascriptphpjqueryonclick

Searching for values within an array using the ".includes" method

I'm curious if there's a method to determine if a string contains any characters that are also present in an array? const array = ["cake", "hello", "ok"]; const string = "hello"; let result = string.include ...

javascriptarrays

Utilizing Ajax and Jquery to dynamically adjust CSS properties, dependent on data from a specific MySQL row

I've been working on a system to automatically update a Scene Selection page whenever a new number is added to the permission table in Mysql. The PHP for the login and retrieving the number from the members table is working fine. My issue now lies wi ...

phpjavascriptjqueryhtmlajax

What is the best way to transfer data from my browser to the backend of my application?

I am currently working on developing a basic weather application using Express and Node.js. To accomplish this, I need to automatically retrieve the latitude and longitude of the user. While I understand how to achieve this through HTML5 Geolocation in t ...

javascriptnode.jsexpressnode-modules

Tips for transferring information from one php page to another php page via ajax

I am attempting to retrieve data from one PHP page and transfer it to another page through the use of Ajax. JavaScript : $.ajax({ url: "action.php", success: function(data){ $.ajax({ url: "data.php?id=data" ...

javascriptphpjqueryajax

How to store data in MongoDB without relying on specific request bodies

I realize that I can simplify the code: var event = new EventModel(req.body); event.save....... If the input names match the attribute names in my database, mongoose can save by simply passing req.body. However, there is an issue with handling dateO sep ...

javascriptnode.jsmongodbmongoose

What is the purpose of including an express server instance as an argument for the http module in Node.JS?

Currently delving into the realms of Node.JS, Express.JS, and Socket.IO. The tutorials I've come across so far showcase a complex series of code to kickstart each of these modules: var express = require("express"); var app = express(); var server = ...

javascriptnode.jsexpresssocket.io

Angular-template static functions refer to functions that do not require an

Our project utilizes the linting-config provided by AirBnB. There is a rule that stipulates class methods must utilize this or be declared as static. While this rule theoretically makes sense, it seems to present challenges within an angular context. Consi ...

javascriptangulartypescript

Is there a way to modify the props.data in a child component?

I need assistance with displaying a range from an array that is passed into a child component. Currently, my Parent component looks like this: import data from './data.json' return ( <Cell symbol={data.symbol} number={data.number} /> ) ...

javascriptarraysreactjsreact-hooksuse-state

Setting up the permanent class path for Nodejs in Linux Mint

Recently, I attempted to install Nodejs Version 6.9.4 on my Linux Mint system using the following steps: $ cd /tmp $ wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz $ tar xvfz node-v6.3.1-linux-x64.tar.gz $ mkdir -p /usr/local/nodejs $ mv ...

javascriptnode.jslinuxnpmlinux-mint

Transforming color images into black and white using JavaScript

     I have implemented this code to convert colored images to grayscale. function applyGrayscaleEffect() {         var imageData = contextSrc.getImageData(0, 0, width, height);         var data = imageData.data;         var p1 = 0.99;   ...

javascripthtmlcssslider

A method for expanding the menu upwards to make room for newly added items

Looking at the images below, I have a menu that needs new items added to it while maintaining the position of the lower-left corner. Essentially, each time an entry is added, the menu should expand upwards from "the upper-left corner" while keepi ...

javascripthtmlcssangularjsangular

jQuery - Enclose selected text with <span> tags - resolving duplicate instance issue

This particular question is related to a similar inquiry asked on Stack Overflow regarding the application of tags to selected text. While the original question was answered, there was a significant flaw in the solution provided. The issue arose when the s ...

jquerycursor-positionstring-lengthreplace

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js

Mysterious issue with jQuery $.ajax: server returns 200 OK but no error messages displayed

I am feeling completely overwhelmed by this issue. I am using simple jQuery ajax calls to retrieve values from a database and populate select elements with the obtained JSON data. It seems to work fine in most browsers on my end, but the client has reporte ...

ajaxjsonjquery

Apply a dynamic function to assign a background color to a specific class

Currently, I have a function called getBackground(items) that returns a background color from a JSON file list. Within my application, there is a component that automatically adds a class name (.item-radio-checked) when a user clicks on an item in the list ...

javascriptangulartypescriptionic2

Tips for distinguishing the beginning and ending points of wrapped text in the Firefox browser

Within my work, I am utilizing a contentEditable span where I aim to position an element with position: absolute on the same line as the cursor. However, issues arise when text wrapping occurs - causing abnormal behavior at the start and end of wrapped lin ...

javascripthtmlcss