需要帮助在我的图片旁边隐藏 text/marker/line 东西

Question

我有一个简单的 HTML 网站，CSS 正在运行，但我注意到在我用于链接的所有上传图片旁边有一条非常非常小的线。我猜这就像是指向 img 位置的方向，但它太小了，我无法真正看到它是什么。任何人都知道它是什么以及我如何摆脱它？？？

Picture or it didn't happen the 4 images, with 1 working and 3 displaying the thingy

body {
  background-image: url("Baggrund.png");
}

.title {
  font-family: sans-serif;
  color: #2E2E2E;
  font-size: 50px;
  margin-top: 100px;
  font-weight: 1000;
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
}

.image {
  display: block;
  width: 200px;
  height: 200px;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
}

.overlayFade {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.overlay {
  position: absolute;
  opacity: 0;
  transition: all .3s ease;
  background-color: #008cba;
}

.container:hover .overlay,
.container:hover .overlayFade {
  opacity: 1;
}

<div align="center">
  <div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
        <div class="overlay  overlayFade">
          <div class="text">QGIS Tips & Tricks</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
        <div class="overlay overlayFade">
          <div class="text">KortInfo</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
        <div class="overlay overlayFade">
          <div class="text">Metadatabasen</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
        <div class="overlay overlayFade">
          <div class="text">A-Z</div>
        </div>
    </div>
  </div>

Answer 1

这是 anchor 标签中默认存在的下划线，我刚刚在锚标签上使用了 text-decoration: none，它消失了我希望这就是您要找的

body {
  background-image: url("Baggrund.png");
}

.title {
  font-family: sans-serif;
  color: #2E2E2E;
  font-size: 50px;
  margin-top: 100px;
  font-weight: 1000;
}
a
{
text-decoration:none;
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
}

.image {
  display: block;
  width: 200px;
  height: 200px;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
}

.overlayFade {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.overlay {
  position: absolute;
  opacity: 0;
  transition: all .3s ease;
  background-color: #008cba;
}

.container:hover .overlay,
.container:hover .overlayFade {
  opacity: 1;
}

<div align="center">
  <div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
        <div class="overlay  overlayFade">
          <div class="text">QGIS Tips & Tricks</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
        <div class="overlay overlayFade">
          <div class="text">KortInfo</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
        <div class="overlay overlayFade">
          <div class="text">Metadatabasen</div>
        </div>
    </div>
    <div class="container">
      <a href="randomsite.com" </a>
        <img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
        <div class="overlay overlayFade">
          <div class="text">A-Z</div>
        </div>
    </div>
  </div>

需要帮助在我的图片旁边隐藏 text/marker/line 东西

Need help hiding text/marker/line something next to my images

html

text

image

hide