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

【问题标题】：How do I only apply css to text inside a button?如何仅将 css 应用于按钮内的文本？
【发布时间】：2022-01-18 16:48:39
【问题描述】：

我有这个

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

【问题讨论】：

你想应用什么 CSS？
@TemaniAfif 我想将“点击我”放在 SVG 的右侧，但现在，文本首先出现，然后是 SVG。

标签： css button text position css-position

【解决方案1】：

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

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

button  {
  line-height:20px;
}

&lt;button class="jumpButton"&gt;"Click me" &lt;svg class="arrowsvg"&gt;&lt;path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"&gt;&lt;/path&gt;&lt;svg&gt;&lt;button&gt;

【讨论】：

【解决方案2】：

由于您说您不能更改 html 并且 CSS 没有选择器来选择周围没有标签的元素内的文本，因此我认为您需要将 svg 定位为 position: absolute。

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

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

【讨论】：