Hover Blue line issue

Question

I am trying to hide the opacity and font on hover. It works fine but there is a blue line lingering and I don't know what it is. I tried outline: 0; on css doesn't remove it.

I'll send you the code and a picture of what I'm talking about.

p {
  font-size: 45px;
  padding: 142px 0;
  border-radius: 10px;
  outline: 0;
}

p:hover {
  color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
}

<div class="container painting-container">
  <div class="row">
    <div class="border-box col-xs-12 col-sm-12 col-md-6">
      <a href="#">
        <div class="box-image canvas-main">
          <P>CANVAS</P>
        </div>
      </a>
    </div>
    <div class="border-box col-xs-12 col-sm-12 col-md-6">
      <a href="#">
        <div class="box-image wood-main">
          <P>WOOD</P>
        </div>
      </a>
    </div>
  </div>
</div>

Answer 1

The property you want is 'text-decoration' which is set to underline on the anchor element not your paragraph element. See the below snippet.

p {
        font-size: 45px;
        border-radius: 10px;
        outline: 0;
    }
    p:hover {
        color: rgba(255, 255, 255, 0);
        background-color: rgba(255, 255, 255, 0);
    }

a:hover {
      text-decoration: none;
}

<div class="container painting-container">
    <div class="row">
        <div class="border-box col-xs-12 col-sm-12 col-md-6">
            <a href="#">
                <div class="box-image canvas-main">
                    <P>CANVAS</P>
                </div>
            </a>
        </div>
        <div class="border-box col-xs-12 col-sm-12 col-md-6">
            <a href="#">
                <div class="box-image wood-main">
                    <P>WOOD</P>
                </div>
            </a>
        </div>
    </div>
</div>