0

I'm building a site with minimal styling. I'm using default anchor link styling, but I want certain words to be highlighted. The highlighted words should not be underlined, but this is proving difficult. Here is the code that is not working:

.highlight{
  font-family: sans-serif;
  text-decoration: none;
  background-color: black;
  color:white;
  padding: 0px 4px;
}

a:hover{
  color: red;
}
<h1>
  <a href="/all-products-dummy-link/">View <span class="highlight">everything</span>.</a>
</h1>

As you can see, this would look much better without the blue underline inside of the highlighted span. What is the least convoluted way to achieve this?

world_sword
  • 51
  • 1
  • 1
    inline-block to that element – Temani Afif Jul 25 '22 at 10:56
  • Same as @TemaniAfif answer, simply use display: inline-block; to the class .highlight the working example here. https://jsfiddle.net/Stephen2hats/kos3Lmw4/9/ please use if it is suitable for your needs, thanks. – Stephen Jul 25 '22 at 11:00

0 Answers0