css 使用::before标签 span下画横线

可以使用以下 CSS 代码来给 span 元素下画一条横线：

span::before {
  content: "";
  display: block;
  border-bottom: 1px solid black;
}

这里使用了 ::before 伪元素，在 span 元素前插入了一个空内容的块级元素，并给它设置了一个下边框。这样就可以实现在 span 元素下方画一条横线的效果。

相关问题

jquery 动态设置css::before不生效

在使用 jQuery 设置 CSS `::before` 伪元素样式时，需要使用 `content` 属性来设置要添加的内容，并且需要使用 `:before` 选择器来选中伪元素，如下所示：

$('#element:before').css('content', '要添加的内容');

例如，要在元素 `#element` 的前面添加一个带有文本的圆点，可以使用以下代码：

$('#element').css({
  'position': 'relative',
  'padding-left': '10px'
}).before('<span class="dot"></span>');

$('.dot:before').css({
  'position': 'absolute',
  'top': 0,
  'left': 0,
  'width': '5px',
  'height': '5px',
  'border-radius': '50%',
  'background-color': 'red',
  'content': '" "'
});

以上代码设置了元素 `#element` 的样式，并在其前面添加了一个带有红色圆点的 `::before` 伪元素。注意，`content` 属性的值必须用双引号包裹起来，并且内容需要用空格隔开。另外，`::before` 选择器在 jQuery 中需要使用 `:` 表示。

css ::before 宽度控制

可以通过设置 `content` 属性为空字符串，再设置 `display` 属性为 `inline-block`，最后设置 `width` 属性来控制 `::before` 伪元素的宽度。示例代码如下：

.element::before {
  content: "";
  display: inline-block;
  width: 100px;
}

其中 `100px` 可以替换成你需要的宽度值。另外，你也可以使用其他的 CSS 属性来控制 `::before` 伪元素的宽度，比如 `padding`、`border` 等。