如何将内联焦点样式赋予包含到下一行的href？

Question

我为我网站上的所有链接创建了一些焦点状态。按钮焦点很棒。当链接被包装时，我正在努力向链接添加内联焦点状态。如果您查看示例，如果链接不换行，那很好。但是，当它换行时，我最终会在链接开头周围出现一个焦点“正方形”，但它不会延伸到整个链接。

如何使包装链接看起来像非包装链接？

如果您愿意，这里是 Codepen。

document.querySelectorAll("a:not(a[href])").forEach(element => {
  element.setAttribute("href", "#")
});

/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

* {
  position: relative;
}

*:focus {
  outline: none;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.button {
  background: blue;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.title {
  max-width: 500px;
}

h4 {
  font-size: 24px;
}

a {
  text-decoration: none;
}

a::before,
input[type='checkbox']::before,
input[type='radio']::before {
  content: "";
  position: absolute;
  border: solid 0px #005fec;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  opacity: 0;
  transition: all 0.2s ease;
  border-radius: 4px;
  filter: blur(4px);
}

a:focus-visible::before,
input[type='checkbox']:focus-visible::before,
input[type='radio']:focus-visible::before {
  content: "";
  position: absolute;
  border: solid 2px #005fec;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
  opacity: 1;
  filter: blur(0px);
  z-index: 10;
}

<div class="container">
  <a class="button">a button</a>
  <div class="title">
    <h4><a href="#">This is going to be some wrapped text, but unfortunately</a> it doesn't wrap it in an inline fashion.
    </h4>
    <h4><a href="#">This is some inline</a> text. Works fine.</h4>
  </div>
</div>

Answer 1

我认为只有大纲才能给你想要的结果。

document.querySelectorAll("a:not(a[href])").forEach(element => {
  element.setAttribute("href", "#")
});

/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

* {
  position: relative;
}

*:focus {
  outline: none;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.button {
  background: blue;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.title {
  max-width: 500px;
}

h4 {
  font-size: 24px;
}

a {
  text-decoration: none;
}

a,
input[type='checkbox'],
input[type='radio'] {
  outline: solid 0px #005fec;
  outline-offset:0px;
  transition: all 0.2s ease;
}

a:focus-visible,
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
  outline: solid 2px #005fec;
  outline-offset:4px;
}

<div class="container">
  <a class="button">a button</a>
  <div class="title">
    <h4><a href="#">This is going to be some wrapped text, but unfortunately</a> it doesn't wrap it in an inline fashion.
    </h4>
    <h4><a href="#">This is some inline</a> text. Works fine.</h4>
  </div>
</div>