A specific effect in css and bootstrap

I am new to bootstrap and made some stuff.

but there is a specific effect of highlight a text i can't reach. i made it wrong many times - like the BG was offset or the line had no spacing and many more problems.

Can you please explain me how to do this ?

Tenter image description herehank !

edit: Thae image is photoshop, how the final result should look

Solution

Or you could work with a border and padding like in the following demo and this fiddle.

For the unhovered link I've added a transparent border to avoid jumping on hover. You could probably also do this with margin/padding.

.styled-link {
  color: #5F6065;
  font-size: 2em;
  padding: 15px;
  border-left: 2px solid transparent;
  margin: 5px;
  text-decoration: underline;
}

.styled-link:hover {
  color: gray;
  background-color: #D1E7FE;
  font-size: 2em;
  border-left: 2px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="styled-link">Highlighted link</a>