html - CSS - 避免文本节点和跨度之间超过 16px 的空间

Question

我有这个元素。

<div class="container">
  <h2>
    Stackoverflow is a QA website<span class="link"></span>
  </h2>
</div>

无论元素的宽度如何，元素和文本节点之间必须只有1rem (16px)空格。spanh2

我使用了以下 CSS，但它不起作用。该span元素位于右侧。文本1rem和span.

html {
  font-size: 16px;
}

.container {
  max-width: 500px;
}

h2 {
  font-size: 2.25rem;
  line-height: 3rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: flex;
  justfiy-content: flex-start;
}

h2>span.link {
  display: flex;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  align-self: center;
  margin-left: 1rem;
  width: 40px !important;
  height: 40px !important;
  border-radius: 20px;
  background: #eee;
  -webkit-mask-image: radial-gradient(white, black);
  overflow: hidden;
}

h2:hover>span.link {
  visibility: visible;
}

span.link:after {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  content: "";
  border-radius: 20px;
  width: 40px !important;
  height: 40px !important;
  background-image: url("data:image/svg+xml;utf-8, <svg xmlns='http://www.w3.org/2000/svg'  width='100%' height='100%' viewBox='0 0 105 105' version='1.1' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g id='Medium-M' transform='matrix(1,0,0,1,-11.233,88.1885)'><path fill='#616161' d='M65.882,-56.192L58.465,-48.713C61.394,-48.446 63.917,-47.856 66.032,-46.941C68.147,-46.027 69.95,-44.822 71.439,-43.326C74.195,-40.549 76.033,-37.497 76.954,-34.168C77.875,-30.839 77.884,-27.519 76.983,-24.206C76.082,-20.894 74.256,-17.862 71.506,-15.112L55.276,1.07C52.526,3.819 49.494,5.651 46.182,6.566C42.869,7.481 39.55,7.486 36.224,6.582C32.898,5.678 29.86,3.848 27.11,1.092C24.355,-1.685 22.516,-4.737 21.596,-8.066C20.675,-11.395 20.672,-14.714 21.587,-18.024C22.502,-21.333 24.334,-24.366 27.084,-27.122L35.468,-35.497C34.69,-37.256 34.189,-39.165 33.963,-41.226C33.737,-43.287 33.836,-45.262 34.261,-47.15L20.23,-33.194C16.251,-29.206 13.589,-24.795 12.244,-19.96C10.9,-15.126 10.896,-10.284 12.233,-5.433C13.571,-0.583 16.253,3.853 20.279,7.874C24.333,11.933 28.783,14.628 33.631,15.96C38.478,17.292 43.318,17.285 48.149,15.94C52.981,14.595 57.38,11.939 61.348,7.972L78.328,-9.04C82.322,-13.034 84.992,-17.449 86.337,-22.283C87.681,-27.117 87.687,-31.958 86.352,-36.806C85.018,-41.653 82.324,-46.088 78.271,-50.108C76.852,-51.559 75.142,-52.802 73.141,-53.837C71.139,-54.871 68.72,-55.656 65.882,-56.192ZM61.585,-15.044L69.002,-22.523C66.072,-22.79 63.551,-23.38 61.439,-24.295C59.326,-25.209 57.523,-26.412 56.027,-27.901C53.245,-30.684 51.393,-33.74 50.473,-37.069C49.552,-40.397 49.551,-43.716 50.468,-47.026C51.386,-50.336 53.22,-53.365 55.97,-56.115L72.16,-72.297C74.937,-75.053 77.981,-76.888 81.294,-77.803C84.606,-78.717 87.917,-78.721 91.227,-77.814C94.537,-76.907 97.583,-75.065 100.365,-72.288C103.115,-69.532 104.95,-66.491 105.871,-63.165C106.792,-59.839 106.795,-56.52 105.88,-53.208C104.965,-49.895 103.132,-46.864 100.383,-44.114L92.007,-35.739C92.785,-33.954 93.287,-32.037 93.513,-29.99C93.739,-27.943 93.639,-25.972 93.214,-24.078L107.245,-38.042C111.224,-42.03 113.885,-46.442 115.227,-51.276C116.568,-56.11 116.571,-60.951 115.234,-65.799C113.897,-70.647 111.217,-75.084 107.196,-79.111C103.137,-83.164 98.685,-85.858 93.84,-87.192C88.995,-88.526 84.157,-88.521 79.326,-87.176C74.495,-85.832 70.079,-83.159 66.079,-79.159L49.148,-62.196C45.147,-58.197 42.476,-53.781 41.135,-48.949C39.793,-44.118 39.788,-39.278 41.119,-34.431C42.45,-29.583 45.143,-25.149 49.197,-21.128C50.621,-19.677 52.334,-18.433 54.335,-17.395C56.336,-16.357 58.753,-15.574 61.585,-15.044Z' style='fill-rule:nonzero;'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

<div class="container">
  <h2>
    Stackoverflow is a QA website<span class="link"></span>
  </h2>
</div>

---

span:after包含一个 svg 图标。我需要保留图标。但它似乎在这里不起作用。这不是问题。

1rem我需要避免在文本节点和 span 元素之间有超过空间。如何解决？

标签： htmlcss