html - 单词上的自定义行

Question

我试着只在一个词上画一条线。改变它的大小和位置。

这里是我想要的结果:

我尝试使用带背景图像的跨度但没有成功。

https://jsfiddle.net/XZKS/193u9dam/

还有其他问题，背景图像在使用本地镜像时不起作用。

我的网站树状结构:

• _include

  • CSS
    • 样式.css
  • js
  • 图片
    • 线条.png

背景图像:url("../img/line.png");

希望有人能帮帮我，谢谢

Answer 1

试试这个:

.myWordWithLine {
  position: relative;
}

.myWordWithLine::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 24px; // your line height
  background-color: red; // your line color
}