Custom line on a word - html

Question

I try to put a line on only one word. With changing its size and its position.
Here the result I would like to have:
I tried to use a span with background-image but no success.
https://jsfiddle.net/XZKS/193u9dam/
And other problem, background-image don't work when using local image.
My website arborescence:
_include
css
style.css
js
img
line.png
background-image: url("../img/line.png");
I hope someone could help me, thanks

Answer 1

Try this:
.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

Method #01:
You can use css linear-gradient() to draw this background:
Steps:
Create background image with linear-gradient().
Adjust its size with css background-size property.
Place it at the bottom position of the element with background-position css property.
Necessary 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>
Method #02:
You can use ::before OR ::after pseudo element:
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

You can use this
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;
}