单词上的自定义行

Question

我试着只在一个单词上加上一行。随着它的大小和位置的改变。

这是我想要的结果：

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

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

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

我的网站arborescence：

• _include

  • CSS
    • 的style.css
  • JS​​
  • IMG
    • line.png

background-image: 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
}

Answer 2

方法＃01：

您可以使用css linear-gradient()绘制此背景：

<强>步骤：

1. 使用linear-gradient()创建背景图片。
2. 使用css background-size属性调整其大小。
3. 将其放置在具有background-position css属性的元素的底部位置。

必要的CSS：

.line {
    background: linear-gradient(to right, green, green) no-repeat;
    background-size: 100% 5px;
    background-position: left bottom 5px;
}

h3 {
  font-size: 24px;
}
.line {
    background: linear-gradient(to right, green, green) no-repeat;
    background-size: 100% 5px;
    background-position: left bottom 5px;
  
    position: relative;
    padding-top: 0;
    padding-bottom:0;
}

<h3>MY <span class="line">BLOG</span></h3>

方法＃02：

您可以使用::before OR ::after伪元素：

h3 {
  font-size: 24px;
}
.line {
    position: relative;
}

.line::after {
  background: green;
  position: absolute;
  bottom: 5px;
  z-index: -1;
  content: '';
  left: 0;
  right: 0;
  height: 5px;
}

<h3>MY <span class="line">BLOG</span></h3>

Answer 3

你可以用它 http://codepen.io/B101844/pen/bgLPPb

HTML

<div class="main">MY
    <div class="blog">
        BLOG
        <div class="underline"></div>
    </div>
</div>

的CSS

.main{
font-size: 30px;
color: #1c3d93;
font-weight: 900;
}
.blog{
    display: inline-block;
    position: relative;
}
.underline{
    position: absolute;
    background-color: #91dfcf;
    left: 0px;
    right: 0px;
    bottom: 7px;
    z-index: -1;
    height: 8px;
}