How do I only apply css to text inside a button?-CodePudding

I have this

<button >"Click me" <svg ><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"></path><svg><button>

I want to change the CSS of the "Click me" but changing that also changes the SVG.

.jumpButton #text {

}

That doesn't work. I cannot edit the HTML, I want to put the "Click me" to the right of the SVG. I also do not have access to Javascript.

CodePudding user response：

You need to target the SVG and float it to the left

svg {
  width: 20px;
  height: 20px;
  float: left;
}

button  {
  line-height:20px;
}

<button >"Click me" <svg ><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"></path><svg><button>

CodePudding user response：

Since you said you cannot change the html and CSS does not have a selector for the text inside an element that doesn't have a tag around it, I think you need to position the svg with position: absolute instead.

.jumpButton { 
    position: relative; 
    padding-left: 24px; /* This creates space for the icon */
} 
.arrowsvg { 
    content: ""; 
    position: absolute; 
    left: 0; 
}

This should accomplish what you are trying to do. In my tests the svg just takes up a lot of space unnecessarily, which makes the accurate positioning difficult.