如何仅将 css 应用于按钮内的文本？

Question

我有这个

<button class="jumpButton">"Click me" <svg class="arrowsvg"><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>

我想更改“单击我”的 CSS，但更改它也会更改 SVG。

.jumpButton #text {

}

那是行不通的。我无法编辑 HTML，我想将“单击我”放在 SVG 的右侧。我也无权访问 Javascript.

Answer 1

您需要定位 SVG 并将其浮动到左侧

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

button  {
  line-height:20px;
}

<button class="jumpButton">"Click me" <svg class="arrowsvg"><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>

Answer 2

既然你说你不能改变 html 并且 CSS 没有一个没有标签的元素内的文本选择器，我认为你需要定位改为 position: absolute 的 svg。

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

这应该可以完成您正在尝试做的事情。在我的测试中，svg 只是不必要地占用了很多 space，这使得准确定位变得困难。

如何仅将 css 应用于按钮内的文本？

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

css

text

position

css-position

button