Adding a line behind text

#1

Hi,

I am trying to add a line behind some text.

I have the following fiddle, but I can’t work out how to have it the same length of the numbers which will change depending on the page.

https://jsfiddle.net/toolman/467z5bm3/1/

Any ideas how I can have it same length of the number text?

Thanks

#2

Couldn’t you just set the background color on span.count

If not, perhaps something like this will work for you…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.categories span{
  font-size: 20px;
}
.count{
  position: relative;
}
.count::after{
  content:"";
  position:absolute;
  height: 20px;
  left:0;right:0;
  z-index: -1;
  background: #ff0000;
}
</style>

</head>
<body>

<section id="title">
  <div class="container categories">
    <h1>Title Here</h1>
    <span>Browse from
      <span class="count">1444,1444</span>
    </span>
  </div>
</section>

</body>
</html>
1 Like
#3

Awesome :slight_smile: Many thanks, it worked great!

1 Like