.Text_underline{ display: inline-block; text-decoration: underline; } .Text_underline::before { display: inline-block; content: " "; width: 1em; height: 1em; } .Text_underline::after { display: inline-block; content: " "; width: 1em; height: 1em; text-decoration: underline; } 给content: " "; 设置 text-decoration: underline; 无效

你是正确的，`text-decoration` 属性不适用于 `content` 属性中的文本内容。`text-decoration` 只能应用于实际的文本内容，而不是伪元素中的空格。

如果你想要在伪元素中显示下划线，可以使用其他方法，比如使用 `border-bottom` 来模拟下划线效果。下面是一个示例：

.Text_underline::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1px;
  background-color: black;
  margin-right: 0.5em;
}

.Text_underline::after {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1px;
  background-color: black;
  margin-left: 0.5em;
}

在这个示例中，我们通过添加一个空的伪元素，并设置其宽度为 `1em`，高度为 `1px`，背景颜色为黑色来模拟下划线效果。同时，我们通过设置 `margin-right` 和 `margin-left` 来调整伪元素与文本之间的间距。

这样，通过添加 `.Text_underline` 类名到 `span` 元素上，伪元素就会显示出类似下划线的效果。

相关问题

.Text_underline{ display: inline-block; text-decoration: underline; } .Text_underline::before { content: " "; width: 1em; } .Text_underline::after { content: " "; width: 1em; } 对span标签没用

根据你给出的代码，`.Text_underline` 类的样式设置了 `display: inline-block;` 和 `text-decoration: underline;`，而伪元素 `::before` 和 `::after` 则添加了一个宽度为 `1em` 的空格。

确保你在 HTML 中正确地使用了 `span` 元素，并为其添加了 `.Text_underline` 类名，例如：

<span class="Text_underline">这是一个带有下划线的文本</span>

然后，将 CSS 代码放置在你的样式表中，并确保样式表与 HTML 文件关联。这样，`span` 元素就会应用 `.Text_underline` 类的样式，并在其前后插入一个宽度为 `1em` 的空格。

如果仍然无法生效，请检查其他可能的 CSS 规则或样式冲突，以确保没有其他规则覆盖了 `.Text_underline` 类的样式。

.Text_underline::before { display: inline-block; content: " "; width: 1em; height: 1px; background-color: black; } .Text_underline::after { display: inline-block; content: " "; width: 1em; height: 1px; background-color: black; }可以让下划线往下移动一个px吗

是的，你可以使用 `margin-top` 属性来让下划线向下移动一个像素。将 `margin-top` 设置为 `1px` 即可将下划线向下移动一个像素。

以下是具体的代码示例：

.Text_underline::before {
  display: inline-block;
  content: " ";
  width: 1em;
  height: 1px;
  background-color: black;
  margin-top: 1px;
}

.Text_underline::after {
  display: inline-block;
  content: " ";
  width: 1em;
  height: 1px;
  background-color: black;
  margin-top: 1px;
}

通过在伪元素的样式中添加 `margin-top: 1px;`，你可以将下划线向下移动一个像素。记住，你可以根据需要调整 `margin-top` 的值来控制下划线的位置。